{"id":21307295,"url":"https://github.com/jdegand/link-sharing-app-frontend","last_synced_at":"2026-05-02T05:33:19.204Z","repository":{"id":217060137,"uuid":"742945014","full_name":"jdegand/link-sharing-app-frontend","owner":"jdegand","description":"Inspired by Frontend Mentor Challenge Link Sharing App","archived":false,"fork":false,"pushed_at":"2025-01-17T04:16:25.000Z","size":414,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-15T19:48:55.395Z","etag":null,"topics":["angular","frontend-mentor","primeng"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jdegand.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-13T20:45:07.000Z","updated_at":"2025-01-17T04:16:26.000Z","dependencies_parsed_at":"2024-01-17T02:00:02.399Z","dependency_job_id":"53eef3d3-d58c-4cd5-8014-bed9043283ea","html_url":"https://github.com/jdegand/link-sharing-app-frontend","commit_stats":null,"previous_names":["jdegand/link-sharing-app-frontend"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jdegand/link-sharing-app-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Flink-sharing-app-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Flink-sharing-app-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Flink-sharing-app-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Flink-sharing-app-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jdegand","download_url":"https://codeload.github.com/jdegand/link-sharing-app-frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Flink-sharing-app-frontend/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260126714,"owners_count":22962675,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","frontend-mentor","primeng"],"created_at":"2024-11-21T16:31:05.847Z","updated_at":"2026-05-02T05:33:19.160Z","avatar_url":"https://github.com/jdegand.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Link Sharing App Frontend\n\nThis is inspired by the [Link Sharing App Frontend Mentor Challenge](https://www.frontendmentor.io/challenges/linksharing-app-Fbt7yweGsT). I have taken some liberties, as the design does not fully account for authentication.\n\n## Screenshots\n\n![Frontend Mentor Mobile Design](screenshots/frontendmentor-link-sharing-app-mobile-1.jpg \"Frontend Mentor Mobile Design\")\n\n## Built With\n\n- [Angular](https://angular.dev)\n- [Angular CLI](https://github.com/angular/angular-cli) version 17.0.7.\n- [PrimeNG](https://primeng.org/)\n- [PrimeIcons](https://primeng.org/icons)\n\n## Thoughts\n\n- I started the app by building out the dynamic reactive form to add the links.\n- I used `FormBuilder`. FormBuilder has implications for adding custom validators, as there can be extra snags and TypeScript issues.\n- This [StackBlitz](https://stackblitz.com/edit/angular-custom-validator-formgroup-formarray?file=src%2Fapp%2Fapp.component.ts) was a great help.\n- I had included the errors in the wrong place, so I moved the error message conditional statement into the `for` loop for the link controls. This change helped to localize the errors for each link group.\n- Creating a regex to handle every error scenario and URL deviation is very difficult and time-consuming. It is very difficult to trust a regex. Using a custom validator seems to be the best choice to make sure the URL matches the selected platform.\n- I went through many changes to the regex. I also looked into using the [URL API](https://developer.mozilla.org/en-US/docs/Web/API/URL) inside a custom validator to validate the URL value.\n- Material Design icons have removed all third-party icons. See [Github](https://github.com/google/material-design-icons/issues/166) for more. `facebook` still works, but it is deprecated and will be removed shortly. None of the other select options have working icons. It would have been nice just to use a `mat-icon` inside a `mat-option` of a `mat-select`. This really negates a big benefit of switching the form to an Angular Material form.\n- Adding a little icon to each input is a lot more involved than it really should be.\n- I also had problems using `mat-label` and the `for` attribute with a dynamic index. I had to add `CUSTOM_ELEMENTS_SCHEMA` to the schemas array of the home component to use the `for` attribute.\n- After removing the `for` attributes and just using `mat-label`, Chrome complained about there being no `id` matching the generated `for` attribute.\n- I also had trouble getting the `mat-select` working correctly.\n- If you have to add `CUSTOM_ELEMENTS_SCHEMA`, you probably have a misconfiguration.\n- Ultimately, I think there is limited benefit in converting the form to use Angular Material.\n- I did some research and decided to use `PrimeNG` and `PrimeIcons`.\n- PrimeNG has third-party icons. It is almost as feature complete as Angular Material (I would later find out that it doesn't have any copy-to-clipboard features).\n- PrimeNG doesn't have an `ng add` command, so you have to add theme styles to the `angular.json` yourself.\n- Prime icons require a single import in the global `styles.css` file.\n- `FormField doesn't have a name or id` warning in the browser console, so I added a name with the `index` to the URL input.\n- It is tough to associate a label with the dropdown. The `ng-template` cannot take an ID.\n- I think the ng-template loop creates IDs for each dropdown option.\n- The dropdown's `name` property is `platform`.\n- Firefox doesn't show an error for the label. Firefox had quite a few warnings associated with the `PrimeNG` styling.\n- To fix this label issue, I may have to refactor again.\n- In Chrome, the error choice is `incorrect label use` or `no label associated with a form field`.\n- I used the [Messages Module](https://primeng.org/messages) to show inline errors on the forms.\n- `visible` in the menubar does not update from state changes. It is only evaluated once.\n- Is it best to localize the navbar per page versus adding it once to the `app` component? This strategy would lead to a lot of duplicated code.\n- `PrimeNG` has a design philosophy to minimize conditionals in templates.\n- One strategy I have seen for PrimeNG navbars is to use `ngIf` to conditionally render them. Basically, you show no menubar when unauthenticated. I searched Github, and [this](https://github.com/softrams/bulwark/blob/master/frontend/src/app/navbar/navbar.component.html) is an example of that strategy.\n- Initially, I used a `computed` signal to update the menu items. Since I am using a signal for the auth state, this made sense, and I was able to toggle menu items. However, when I tried to add `visible` and `fragment` to the menubar, I encountered problems.\n- `computed` menubar fragments are missing on first-run navigation. You can use `visible` to have the links added when the fragment is available. I envisioned using either approach to allow the profile route to be unique and shareable.\n- I don't think the fragments are `recomputed` inside `computed` or `effect`. See this [Stack Overflow article](https://stackoverflow.com/questions/76312588/angular-effects-and-conditional-use-of-signals).\n- I changed to use `effect` in the navbar component, as `computed` is not intended to have conditionals. See [Github](https://github.com/angular/angular/issues/49161) for more.\n- Using `computed` or `effect` did not change the fact that fragment and visible parameters were not evaluated in time for the first navigation to a route, so I created a separate `public-profile` page that can be shared.\n- I initially used the [Realworld API](https://realworld-docs.netlify.app/docs/specs/frontend-specs/api) and my [Angular Auth repo](https://github.com/jdegand/angular-auth) as a starting point for authentication.\n- Using a signal for authentication state is a [new strategy](https://www.youtube.com/watch?v=R8a8ituFkls). See this [video](https://www.youtube.com/watch?v=foUS5JlDlCs) for how signals and RxJs can work together for authentication.\n- Creating a simple guard to prevent a user from visiting `login` and `register` when authenticated was difficult.\n- Since auth signal is only saved in memory, a refresh or typing a URL erases the signal state. By persisting the auth signal, you can add a guard to `register` and `login`. A user visits the routes, but sees nothing on the page besides the navbar.\n- Even if you conditionally remove links from the menubar, a user can visit those routes typing the correct URL.\n- Instead of using a guard for the `register` and `login` pages, you can check for the auth signal in the constructor and redirect based on the state of the auth signal. I got the idea from looking at this [Github project](https://github.com/joshuamorony/angularstart-chat/blob/main/src/app/auth/login/login.component.ts).\n- Signals and guards are a problematic combination. If you change the signal to an observable, you create a memory leak. See [Github](https://github.com/angular/angular/issues/51280) for more.\n- I used [FileUpload](https://primeng.org/fileupload) to save a profile picture.\n- I did not add the `FileUpload` component to the existing form originally. I used the `url` action to send the file to the backend. I used the `onUpload` and `onError` methods to handle successful and unsuccessful API responses. I refactored to send `formData` back to the backend. You have to loop over the `formData` object to see the values and you will have to ignore TypeScript issues.\n- To reset the file input, I used a `ViewChild` ref. I tried to pass a form template variable on the file input to the `onUpload` function and call the `clear` method inside that function, but it did not work, although the file was correctly saved. `ViewChild` is an easy way to grab the template variable, and you can call the `clear` method on the `ViewChild` variable. I had to use `any` for the TypeScript type. I fixed the typing for the `ViewChild` variable by using `ElementRef`.\n- PrimeNG does not have a `Clipboard` component. [Angular Material CDK](https://material.angular.io/cdk/clipboard/overview) has a clipboard directive. In lieu of adding that dependency, I used the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API). The clipboard API can be blocked by the [Permissions API](https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API) if you don't use the clipboard API in conjunction with a user click.\n- Using binding, you can sanitize (albeit not fully (hrefs are still displayed)) DOM input. The profile image is `base64` and I did not sanitize it. I used `src=\"data:{{userInfo.profile.fileType}};base64,{{userInfo.profile.img}}\"` inside the `img` tag. I could not bind the image value to `[src]` because the type of `img` was `File`. I needed to change it to `string` for the binding to work. I duplicated `UserInfoDto` into `Preview` and created a separate `ProfileDto` with `img` being set to `string`. This is a marginal improvement. If you were to inject and use `DomSanitizer`, I think it might be best to construct the string separately and save the sanitized output to another variable that you would then use in the template.\n- I used `take` to unsubscribe from my observables. You could manually call `unsubscribe` or convert to a declarative approach with async pipe.\n- I have a jwt decoder service that can be used in combination with the auth guard to prevent a user from accessing routes if the jwt is expired. I have not done that, as the interceptor can refresh the access token. So a user with an expired token can access the links and profile pages and the token will be refreshed when those page's forms are submitted. The preview page refreshes on route navigation.\n- Initially, I had a simple, functional interceptor. I converted that to a class based interceptor. The interceptor does a lot, and it could be possible to refactor into multiple interceptors. The backend had problems when an expired token header was attached to refresh token requests. Although the refresh route permitted all users, an `ExpiredJwtException` would still be thrown and prevent a response back to the frontend. I refactored to make sure the header would not be set at all on refresh requests.\n- I have two different API requests (`GET` and `POST`) to get the refresh token.\n- [VS Code](https://github.com/microsoft/vscode/issues/205651) does not plan on supporting the new Angular control flow syntax. Apparently, [JS Beautify](https://github.com/beautifier/js-beautify/issues/2219) is used by VS Code, and it added control flow formatting that is not perfect, so the formatting option for it is turned off by default. It seems like it will be some time before formatting for the new control flow syntax is handled error-free. `Prettier` may be necessary.\n- I periodically add linting with `ng add @angular-eslint/schematics`. I lint, fix the errors, and remove the dependencies.\n- The register page's `p-password` and label were incorrectly associated. The documentation was not clear. This [Github issue](https://github.com/primefaces/primeng/issues/13952) shows a solution, but there still seems to be issues with the `p-password` component.\n- A lot of PrimeNG components have accessibility issues. I used `ariaLabelledBy` to get around issues where a label `for` attribute would not work.\n- Very easy to toggle themes in PrimeNG.\n\n## Continued Development\n\n- Allow multiple links for same platform? Need another custom validator to prevent it?\n- Styling\n- Drag and Drop functionality on Preview page\n- Testing (I left the Karma and Jasmine packages installed)\n- TypeScript improvements. Zod?\n- Best to refactor `Preview` template into more components?\n- Convert class based interceptor into a functional interceptor? Refresh token expiration ?\n\n## Useful Resources\n\n- [Image Color Picker](https://imagecolorpicker.com/)\n- [Transform Tools](https://transform.tools/) - JSON to TypeScript converter \u0026 more\n- [Frontend Mentor](https://www.frontendmentor.io/challenges/linksharing-app-Fbt7yweGsT) - Link Sharing App\n- [W3 Schools](https://www.w3schools.com/howto/howto_css_devices.asp) - how to create devices with CSS\n- [YouTube](https://www.youtube.com/watch?v=Ekkt5S0BzCo\u0026list=PL1BztTYDF-QNlGo5-g65Xj1mINHYk_FM9\u0026index=130) - #130 Adding Form Groups Dynamically | Reactive Forms | A Complete Angular Course\n- [Make Use Of](https://www.makeuseof.com/regular-expressions-validate-url/#:~:text=The%20regex%20will%20consider%20a,characters%20and%2For%20special%20characters.) - regular expressions validate url\n- [Angular University](https://blog.angular-university.io/angular-form-array/) - angular form array\n- [YouTube](https://www.youtube.com/watch?v=aOQ1xFC3amw) - Angular Form Array - Step by Step Example\n- [Stack Overflow](https://stackoverflow.com/questions/59284894/type-abstractcontrol-is-missing-the-following-properties-from-type-formgroup) - type abstract control is missing the following properties from type formgroup\n- [YouTube](https://www.youtube.com/watch?v=ZfWCr8BzYHY) - Angular Drag and Drop - The Best Way\n- [FreeCodeCamp](https://www.freecodecamp.org/news/how-to-write-a-regular-expression-for-a-url/) - how to write a regular expression for a url\n- [Stack Overflow](https://stackoverflow.com/questions/49746997/angular-material-maticon-in-matselect) - angular maticon in matselect\n- [Stack Blitz](https://stackblitz.com/edit/angular-validate-dynamic-formarray-formbuilder?file=src%2Fform-builder%2Fform-builder.component.ts) - angular validate dynamic formarray formbuilder\n- [Stack Overflow](https://stackoverflow.com/questions/3809401/what-is-a-good-regular-expression-to-match-a-url) - what is a good regular expression to match a url\n- [Gist](https://gist.github.com/horrormyth/7908abda1e355cf9e5ab4e152b15aac0/revisions) - domain regex\n- [Stack Overflow](https://stackoverflow.com/questions/32730133/javascript-reg-exp-to-match-specific-domain-name) - javascript reg exp to match specific domain name\n- [Stack Overflow](https://stackoverflow.com/questions/51954038/angular-reactive-form-custom-validation-using-formbuilder) - angular reactive form custom validation using FormBuilder\n- [YouTube](https://www.youtube.com/watch?v=mK0CX-68hBE) - Angular Reactive Forms: Learn How to Create A Custom Validator\n- [Stack Overflow](https://stackoverflow.com/questions/57794118/how-to-add-custom-validator-to-a-formarray) - how to add custom validator to a form array\n- [Stack Blitz](https://stackblitz.com/edit/angular-ktzv69?file=src%2Fapp%2Fapp.component.ts) - form array vs form array group validator\n- [Stack Overflow](https://stackoverflow.com/questions/66426678/angular-11-type-controlarray-formarray-validationerrors-null-is-not) - form array validation errors\n- [Stack Blitz](https://stackblitz.com/edit/angular-custom-validator-formgroup-formarray?file=src%2Fapp%2Fapp.component.ts) - Angular Custom Validator Formgroup Formarray\n- [Medium](https://medium.com/@aayyash/authentication-in-angular-why-it-is-so-hard-to-wrap-your-head-around-it-23ea38a366de) - authentication in angular why it is so hard to wrap your head around it\n- [Stack Blitz](https://stackoverflow.com/questions/48681594/angular-dynamic-forms-and-angular-material) - angular dynamic forms and angular material\n- [Medium](https://medium.com/ngconf/an-introduction-to-angular-material-form-fields-5828b92d3a3c) - an introduction to angular material form fields\n- [Stack Overflow](https://stackoverflow.com/questions/55299113/replace-mat-icon-with-svg-graphic) - replace mat icon with svg graphic\n- [Stack Overflow](https://stackoverflow.com/questions/56882657/mat-select-value-doesnt-work-with-formcontrolname) - mat select value doesnt work with formcontrolname\n- [Stack Overflow](https://stackoverflow.com/questions/57646437/how-to-use-mat-select-with-reactive-forms-formarray-angular) - how to use mat select with reactive forms formarray angular\n- [Stack Overflow](https://stackoverflow.com/questions/54877520/prime-ng-dropdown-with-icons) - prime ng dropdown with icons\n- [Blog](https://medium.com/@haseenakhader.uk/angular-reactive-form-using-primeng-and-its-validation-8baf6b9e7ed4) - angular reactive form using primeng and its validation\n- [YouTube](https://www.youtube.com/watch?v=HbK3uA5F7bc) - Reactive Form with Validation using Angular and PrimeNG\n- [Stack Overflow](https://stackoverflow.com/questions/57272026/primeng-dropdown-not-binding-the-options-in-angular-formarray) - primeng dropdown not binding the options in angular form array\n- [Stack Overflow](https://stackoverflow.com/questions/46926182/property-controls-does-not-exist-on-type-abstractcontrol-angular-4) - property controls does not exist on type abstract control angular\n- [Stack Overflow](https://stackoverflow.com/questions/41070478/no-value-accessor-for-form-control) - no value accessor for form control\n- [How to JS](https://howtojs.io/how-to-solve-property-controls-does-not-exist-on-type-abstractcontrol-error-in-angular-13-applications/) - how to solve property controls does not exist on type abstract control error\n- [Angular Docs](https://angular.io/errors/NG01203) - NG01203 error\n- [Angular Docs](https://angular.dev/guide/animations#enabling-the-animations-module) - animations module\n- [Stack Overflow](https://stackoverflow.com/questions/50508712/validate-an-url) - validate an url\n- [FreeCodeCamp](https://www.freecodecamp.org/news/how-to-write-a-regular-expression-for-a-url/) - how to write a regular expression for a url\n- [Stack Overflow](https://stackoverflow.com/questions/45356089/can-i-include-an-icon-to-the-highlighted-item-for-primeng-dropdown) - can I include an icon to highlighted item for primeng dropdown\n- [Stack Overflow](https://stackoverflow.com/questions/77625251/angular-17-route-guard-using-signal-not-working) - angular 17 route guard using signal not working\n- [Stack Overflow](https://stackoverflow.com/questions/72459282/how-can-i-use-ngif-on-primeng-menubar-i-am-trying-to-use-it-when-displaying-lo) - how can I use ngIf on primeng menubar\n- [Stack Overflow](https://stackoverflow.com/questions/76789680/primeng-tab-menu-items-not-updating-with-model-change) - primeng tab menu items not updating with model change\n- [Github](https://github.com/primefaces/primeng/issues/13242) - Component: MenuBar - should watch changes on MenuItems\n- [Angular Gems](https://angulargems.beehiiv.com/p/angular-signals-rfcs-overview) - signals overview\n- [Stack Overflow](https://stackoverflow.com/questions/50674470/show-primeng-menuitem-only-when-authenticated) - show primeng menuitem only when authenticated\n- [Primefaces](https://forum.primefaces.org/viewtopic.php?t=58402) - Hide/display menu items based on user role\n- [YouTube](https://www.youtube.com/watch?v=P1r2QjuJWcI\u0026t=112s) - User Login and Register Form Full Video (Code Attatched) - Angular 16 | PrimeNG | Json Server\n- [Github](https://github.com/softrams/bulwark/pull/379/files) - Refactor navbar to use PrimeNG menubar #379\n- [Github](https://github.com/softrams/bulwark/blob/master/frontend/src/app/navbar/navbar.component.html) - frontend/src/app/navbar/navbar.component.html\n- [Github](https://github.com/primefaces/primeng/issues/13394) - Menubar (and other menu components): PrimeNG 16.1.0 unable to dynamically update menu items\n- [Medium](https://medium.com/ngconf/functional-route-guards-in-angular-8829f0e4ca5c) - functional route guards in angular\n- [Github](https://github.com/primefaces/primeng/issues/4197) - Tabmenu - class ui-state-active is not set correctly on `\u003ca\u003e` and `\u003cli\u003e` elements when routing with guards #4197\n- [Stack Overflow](https://stackoverflow.com/questions/65360736/angular-guard-not-called-on-route-path-that-redirects) - angular guard not called on route path that redirects\n- [Stack Overflow](https://stackoverflow.com/questions/77625251/angular-17-route-guard-using-signal-not-working) - angular 17 route guard using signal not working\n- [Github](https://github.com/angular/angular/issues/51280) - effect() created in toObservable() keeps watching the signal when using in Guards #51280\n- [Github](https://github.com/angular/angular/issues/49161) - signals: TypeScript and nullability #49161\n- [Stack Overflow](https://stackoverflow.com/questions/67027172/subscribing-subject-in-guard-not-giving-response) - subscribing subject in guard not giving response\n- [Stack Overflow](https://stackoverflow.com/questions/38425461/angular2-canactivate-calling-async-function) - canActivate calling async function\n- [Medium](https://netbasal.com/converting-signals-to-observables-in-angular-what-you-need-to-know-971eacd3af2) - converting signals to observables\n- [Stack Overflow](https://stackoverflow.com/questions/44742091/how-to-call-an-async-method-in-canactivate-with-angular) - how to call an async method in canActivate\n- [Stack Overflow](https://stackoverflow.com/questions/64676206/authguard-loaded-before-authservice) - authguard-loaded before authservice\n- [Blog](https://devlinduldulao.pro/unveiling-global-state-management-in-angular-with-signals-with-localstorage/) - unveiling global state management in angular in signals with local storage\n- [Medium](https://medium.com/kanlanc/heres-why-storing-jwt-in-local-storage-is-a-great-mistake-df01dad90f9e) - heres why storing jwt in local storage is a great mistake\n- [Stack Overflow](https://stackoverflow.com/questions/40387979/angular-2-observables-destroy-itself-when-navigating-to-another-route) - observables destroy itself when navigating to another route\n- [Medium](https://blog.herodevs.com/navigating-angular-router-events-the-sweet-sixteen-fed8fb8e5f8b) - navigating angular router events the sweet sixteen\n- [Stack Overflow](https://stackoverflow.com/questions/67975666/angular-authguard-and-login-persistence-router-automatically-redirects-to-non-t) - angular authGuard and login persistence\n- [YouTube](https://www.youtube.com/watch?v=V31kisDl4KI) - How to decode JWT token in Angular 17?\n- [YouTube](https://www.youtube.com/@CodeShotsWithProfanis/search?query=authentication) - CodeShots With Profanis authentication videos\n- [YouTube](https://www.youtube.com/watch?v=5nwDz9gfBho) - Angular Signals with Objects and Arrays: Common Pitfall\n- [Stack Overflow](https://stackoverflow.com/questions/71051108/angular-primeng-value-p-message-is-not-allowed) - p-message is not allowed\n- [Medium](https://netbasal.com/create-reusable-copy-to-clipboard-directive-in-angular-fc1139b9e755) - create reusable copy to clipboard directive in angular\n- [Stack Overflow](https://stackoverflow.com/questions/36665234/retrieve-hash-fragment-from-url-with-angular2) - retrieve hash fragment from url with angular2\n- [Medium](https://medium.com/weareaize/creating-a-loading-indicator-using-rxjs-and-the-withloading-pattern-8add4500008e) - creating a loading indicator using rxjs and the with loading pattern\n- [Blog](https://blog.dai.codes/handling-http-loadng-states-in-angular-with-rxjs/) - handling http loading states in angular with rxjs\n- [Stack Overflow](https://stackoverflow.com/questions/75777093/spring-boot-pass-file-through-form) - spring boot pass file through form\n- [Spring Content](https://paulcwarren.github.io/spring-content/) - spring content\n- [Stack Overflow](https://stackoverflow.com/questions/73284094/how-to-store-profile-pictures-in-spring-boot-rest-api-application) - how to store profile pictures in spring boot rest api application\n- [Stack Overflow](https://stackoverflow.com/questions/76312588/angular-effects-and-conditional-use-of-signals) - angular effects and conditional use of signals\n- [Blog](https://danielk.tech/home/basic-auth-state-management) - basic auth state management\n- [Stack Overflow](https://stackoverflow.com/questions/45082603/p-fileupload-does-not-work-more-than-once-primeng) - fileupload does not work more than once primeng\n- [Github](https://github.com/primefaces/primeng/issues/4018) - When using custom file uploads, selected file does not clear\n- [Stack Overflow](https://stackoverflow.com/questions/73295132/how-do-i-bind-a-primeng-file-upload-component-to-my-angular-form-control) - how do I bind a primeng file upload component to my angular form control\n- [Stack Blitz](https://stackblitz.com/edit/jhcz9a?file=src%2Fapp%2FFileUploadControlValueAccessor.directive.ts) - FileUploadControlValueAccessor\n- [Stack Overflow](https://stackoverflow.com/questions/41825698/add-custom-headers-before-upload-with-primengs-fileupload-component) - add custom headers before upload\n- [Stack Overflow](https://stackoverflow.com/questions/45672235/hide-upload-button-primeng) - hide upload button primeng\n- [Reddit](https://www.reddit.com/r/Angular2/comments/qwt1k9/primeng_pfileupload_reactive_form_approach/?rdt=35579) - primeng file upload reactive form\n- [Stack Overflow](https://stackoverflow.com/questions/50677868/error-ts2339-property-entries-does-not-exist-on-type-formdata) - property entries does not exist on type formData\n- [Stack Overflow](https://stackoverflow.com/questions/55591871/view-blob-response-as-image-in-angular) - view blob response as image in angular\n- [Stack Overflow](https://stackoverflow.com/questions/33923985/parameter-is-not-of-type-blob) - parameter is not of type blob\n- [Stack Overflow](https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript) - creating a blob from a base64 string in javascript\n- [Medium](https://netbasal.com/how-to-implement-file-uploading-in-angular-reactive-forms-89a3fffa1a03) - how to implement file uploading in angular reactive forms\n- [Stack Overflow](https://stackoverflow.com/questions/7120456/how-to-get-file-type-extension-from-byte-blob) - how to get file type extension from byte blob\n- [Stack Overflow](https://stackoverflow.com/questions/35618463/change-route-params-without-reloading-in-angular-2) - change route params without reloading\n- [Stack Overflow](https://stackoverflow.com/questions/47057696/how-to-use-es6-template-literal-as-angular-component-input) - es6 template literal as angular component input\n- [Stack Blitz](https://stackblitz.com/edit/angular-clipboard-example?file=src%2Fapp%2Fapp.component.ts) - Clipboard API and Angular\n- [Stack Overflow](https://stackoverflow.com/questions/60581285/execcommand-is-now-obsolete-whats-the-alternative) - execCommand is now obsolete whats the alternative (there is none.)\n- [Stack Overflow](https://stackoverflow.com/questions/72109664/how-to-show-primeng-tooltip-only-on-click) - how to show primeng tooltip only on click\n- [Stack Overflow](https://stackoverflow.com/questions/74645689/upload-files-using-reactiveforms-and-fileupload-component-angular) - upload files using reactive forms and file upload component angular\n- [Stack Overflow](https://stackoverflow.com/questions/64319089/primeng-listbox-how-to-allow-re-ordering-of-items-via-drag-and-drop) - primeng listbox how to allow reording of items vis drag and drop\n- [Medium](https://medium.com/@bakhtmunir/refresh-token-in-angular-e212c2adaa77) - refresh token in angular\n- [YouTube](https://www.youtube.com/watch?v=HXwj-_mii3c) - How Interceptors EASILY implement Refresh Tokens in Angular!\n- [Stack Overflow](https://stackoverflow.com/questions/66074693/warning-sanitizing-unsafe-url-value-datatext-htmlbase64) - warning sanitizing unsafe url value datatext htmlbase64\n- [Stack Overflow](https://stackoverflow.com/questions/38812993/base64-to-image-angular-2) - base64 to image angular 2\n- [Medium](https://betterprogramming.pub/angular-vs-interceptors-guide-c256b72f3415#:~:text=This%20means%20that%20if%20you,you%20should%20use%20a%20guard.) - can activate vs interceptors guide\n- [Angular University](https://blog.angular-university.io/angular-if/) - angular if\n- [Stack Overflow](https://stackoverflow.com/questions/59208257/file-input-event-type-in-angular) - file input event type in angular\n- [Stack Overflow](https://stackoverflow.com/questions/77477534/how-can-i-use-async-pipe-with-defer-to-load-and-declare-variable-in-template-in) - how can I use async pipe with defer to load and declare variable in template\n- [Stack Overflow](https://stackoverflow.com/questions/45082603/p-fileupload-does-not-work-more-than-once-primeng) - p fileupload does not work more than once primeng\n- [Dev.to](https://dev.to/rensjaspers/stop-pretending-the-error-never-happened-1pfn) - stop pretending the error never happened\n- [Medium](https://codereacter.medium.com/goodbye-async-pipe-hello-signals-w-ngrx-signals-f61f1f3074bd) - goodbye async pipe hello signals w ngrx signals\n- [Medium](https://itnext.io/migrate-angular-interceptors-to-function-based-interceptors-90bd433e0c2a) - migrate angular interceptors to function based interceptors\n- [Stack Overflow](https://stackoverflow.com/questions/55711337/angular-http-interceptor-subscribing-to-observable-and-then-returning-next-handl) - angular http interceptor subscribing to observable and then return next handl\n- [Blog](https://danielk.tech/home/angular-retry-an-http-request) - angular retry an http request\n- [Stack Overflow](https://stackoverflow.com/questions/76851243/angular-interceptor-always-get-null-value-accessing-the-accesstoken-from-local) - angular interceptor always get null value accesing the access token from local\n- [Stack Overflow](https://stackoverflow.com/questions/77840978/how-to-use-functional-interceptor-for-refreshing-token-in-angular-17) - how to use functional interceptor for refreshing token in angular 17\n- [Stack Overflow](https://stackoverflow.com/questions/58377068/remove-authorization-header-for-some-http-calls-angular) - remove authorization header for http calls angular\n- [Blog](https://www.sarasoueidan.com/blog/accessible-icon-buttons/) - accessible icon buttons\n- [Stack Overflow](https://stackoverflow.com/questions/42235156/angular-2-iterate-over-reactive-form-controls-and-mark-as-dirty) - iterate over reactive form controls and mark as dirty\n- [YouTube](https://www.youtube.com/watch?v=JZYHo86eov8) - PrimeNG Dynamic Theme Change (using Dropdown contains multiple themes)\n- [Codepen](https://codepen.io/Henrique_Gerhardt/pen/eYRXRQV) - Phone Outline\n- [Blog](https://timdeschryver.dev/blog/use-angular-directives-to-extend-components-that-you-dont-own) - use angular directives to extend components that you dont own\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Flink-sharing-app-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjdegand%2Flink-sharing-app-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Flink-sharing-app-frontend/lists"}