Skip to content

leolanese/Angular-Component-Communication

Repository files navigation

Angular (19+) Observables Vs Signal using @Input/@Output playground and Signal Input/Output 🔊

Demo

Demo


Modern practices latest final signal-based API is implementing 🚀

 @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.

💯 Thanks!

Now, don't be an stranger. Let's stay in touch!

leolanese’s GitHub image
🔘 Linkedin: LeoLanese
🔘 Twitter: @LeoLanese
🔘 DEV.to: Blog
🔘 Questions / Suggestion / Recommendation: [email protected]

About

Angular (20+) Observables and Signal using Input/Output and Signal Input/Output

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published