https://github.com/leolanese/angular-component-communication
Angular (19+) Observables and Signal using @Input/@Output playground and Signal Input/Output
https://github.com/leolanese/angular-component-communication
angular httpresource observable rxjs signal typescript
Last synced: about 2 months ago
JSON representation
Angular (19+) Observables and Signal using @Input/@Output playground and Signal Input/Output
- Host: GitHub
- URL: https://github.com/leolanese/angular-component-communication
- Owner: leolanese
- Created: 2025-01-24T14:09:25.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-15T12:09:49.000Z (about 1 year ago)
- Last Synced: 2025-05-06T21:20:27.682Z (about 1 year ago)
- Topics: angular, httpresource, observable, rxjs, signal, typescript
- Language: TypeScript
- Homepage:
- Size: 267 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular (19+) Observables Vs Signal using @Input/@Output playground and Signal Input/Output 🔊
## Demo
---
## Modern practices latest final signal-based API is implementing 🚀
```js
✅ @NgModule → Standalone component
✅ *ngFor, *ngIf → Modern control flow: @if, @for
✅ Parent emits updates through writableSignal() following the Modern `Signal-Based Component Architecture Pattern` (Service (Shared State) ←→ Parent (Local State) ←→ Child (Pure Input))
✅ ngOnInit() + subscribe() + contructor based inject → Use reactive Signals + computed()
✅ contruct-based DI injection → inject(HttpClient)
✅ Better Ts notation → Protected + readonly template properties for protection and mutability control
✅ Two-Way Binding (Old Way) → signal-input-pattern
```
---
## NOTES:
> When passing values from a P -> C component using the `@Input`, `these values are not available in the constructor` = Avoids running Angular-specific logic or accessing @Input properties, as they are not yet set.
> If you need to react to changes in @Input values beyond initialization, consider using the `ngOnChanges()` lifecycle hook
### constructor()
- Called first, before any Angular lifecycle hooks.
- Used to initialise the component instance.
- Runs before Angular has fully initialized the component.
- `Not safe access @Input values`
### ngOnInit()
- called after the constructor, after the first ngOnChanges()
- `Safe for access @Input` values
- Runs after the constructor and after Angular sets up the component's bindings.
---
### :100: Thanks!
#### Now, don't be an stranger. Let's stay in touch!
##### :radio_button: Linkedin: LeoLanese
##### :radio_button: Twitter: @LeoLanese
##### :radio_button: DEV.to: Blog
##### :radio_button: Questions / Suggestion / Recommendation: developer@leolanese.com