Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jdegand/big-signal
Angular Challenges Big Signal Solution
https://github.com/jdegand/big-signal
angular-challenges
Last synced: about 1 month ago
JSON representation
Angular Challenges Big Signal Solution
- Host: GitHub
- URL: https://github.com/jdegand/big-signal
- Owner: jdegand
- Created: 2024-05-30T19:03:05.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-06-11T04:14:02.000Z (6 months ago)
- Last Synced: 2024-06-11T05:27:50.998Z (6 months ago)
- Topics: angular-challenges
- Language: TypeScript
- Homepage:
- Size: 122 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Big Signal
[Angular Challenges](https://github.com/tomalaforge/angular-challenges) Big Signal Solution
## Information
In this challenge, you can imagine a big application where you store your user state inside a service and you use this service to use your user anywhere in your application.
The issue is when you update one property of your user, the entire application is updating.
I added the `CDFlashingDirective` to vizualise when one component is rerendering.
## Statement
With Signal, you can now be more fine-grained in what the UI is rerendering. The goal of this challenge is to understand why everything is rerendering and you refactor the application to be more performante.
## Thoughts
- Used CDN for Tailwind CSS styling.
- Possible explanation: `When you read a signal within an OnPush component's template, Angular tracks the signal as a dependency of that component. When the value of that signal changes, Angular automatically marks the component to ensure it gets updated the next time change detection runs.`
- `In case an input receives a mutable object as value and you modify the object but preserve the reference, Angular will not invoke change detection. That’s the expected behavior because the previous and the current value of the input point to the same reference.`
- `Signal Components, envisioned for future Angular versions, will provide a more fine-grained behavior: Only changed parts of components will be checked. These parts will be embedded views defined by structural directives like ngFor or ngIf.`
- Type narrowing has been a problem with signal objects.
## Useful Resources
- [Angular University](https://blog.angular-university.io/angular-signals/#:~:text=If%20the%20value%20that%20we,systematically%20emitting%20the%20same%20value) - Angular Signals Complete Guide
- [YouTube](https://www.youtube.com/watch?v=vy03zR73Rio&t=13s) - How to use Signals with Angular Forms?
- [YouTube](https://www.youtube.com/watch?v=-yPnPZV3Bp8) - Don't use Signals with Angular Reactive Forms!
- [Stack Overflow](https://stackoverflow.com/questions/78303010/tosignal-on-observables-inside-signal) - tosignal on observables inside signal
- [Hackernoon](https://hackernoon.com/a-guide-to-angular-signals-with-practical-use-cases-part-1) - a guide to angular signals with practical use cases part 1
- [Stack Overflow](https://stackoverflow.com/questions/78513169/using-and-updating-objects-with-angular-singals) - using and updating objects with angular signals
- [Stack Overflow](https://stackoverflow.com/questions/77918786/angular-reactive-form-with-signals-based-service) - angular reactive form with signals based service
- [Dev.to](https://dev.to/leolanese/angular-17-reactive-forms-signals-standalone-components-nib) - angular 17 reactive forms signals standalone components nib
- [Angular architects](https://www.angulararchitects.io/en/blog/angular-signals-your-architecture-5-options/) - angular signals your architecture 5 options