@Input and @Output decorators - sravanthimendu98/angular GitHub Wiki

https://www.javatpoint.com/angular-decorators

  • Class decorators, such as @Component and @NgModule
  • Property decorators for properties inside classes, such as @Input and @Output
  • Method decorators for methods inside classes, such as @HostListener
  • Parameter decorators for parameters inside class constructors, such as @Inject

@Input and @Output : allow Angular to share data between the parent context and child directives or components. An @Input property is writable while an @Output property is observable.

@Input and @Output are independent:

If the nested component is such that it only needs to send data to its parent, you need @Output but wouldn't need an @Input). and if the child only needs to receive data from the parent, you'd only need @Input.

image

image

How to use @Output():

Use the @Output)() decorator in the child component or directive to allow data to flow from the child out to the parent.

image

image