@Input @Output decorators in Angular

Decorator

A decorator is simply a function that modifies definition of a class or properties inside a class. These decorators are also called as annotations and are mainly classified as two types - class decorator, and class field decorator.

Class Decorator

A decorator that appears immediately before a class definition. 
For instance, @Component() decorator which is mentioned right before a class definition, has metadata that helps Angular to know how those classes or properties should work.

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app';
}

Some other examples of class decorators are @Injectable(), @NgModule(), @Directive(), @Pipe()

Class Field Decorator

A decorator that appears immediately before a field in a class definition.
For instance, @Input() and @Output().

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @Input() count;
  // code
}

To understand the @Input(), @Output() decorators in detail, I took a simple Parent-Child relationship as an example. Let's say we have a Parent who gives chocolates to their Child and Child after receiving the chocolates thanks their Parent.

From the above GIF, Maroon colored block indicates the ParentComponent, the blue colored block indicating the ChildComponent.

Parent to Child Communication, use @Input( )

Setting the chocolate count to 0 at first. When user clicks on the Send Chocolates button on the UI, the chocolate count increases.

parent.component.html

<button (click)="sendToChild()">Send Chocolates to Child</button>
<app-child [chocolateCount]="chocolate"></app-child>
parent.component.ts
export class ParentComponent { 
  chocolate = 0;  
  sendToChild() { 
    this.chocolate++; 
  }
}

When Parent sends chocolates to Child, Child should be able to receive it. Hence, we will catch hold of chocolates using chocolatesCount variable and decorate it with @Input() decorator as it is coming from the ParentComponent.

child.component.html

<p>Chocolates recieved from Parent - {{chocolateCount}}</p>
child.component.ts
export class ChildComponent {
  @Input() chocolateCount;
}

Child to Parent Communication, use @Output( )

Now that Child received chocolates from Parent, the Child should thank Parent.

child.component.html

<button (click)='sayThanks($event)'>Say 'Thank you' to Parent</button>

Using @Output()is little tricky but is easy when you understand it right. Let's decorate the thanks variable with @Output(). Using thanks variable, we will emit the value ('Thank you') to the Parent Component from Child Component. Also, we would need an EventEmitter instance where we specify the type of value we are emitting.

child.component.ts

export class ChildComponent {
@Output() thanks: EventEmitter<string> = new EventEmitter<string>();

sayThanks($event) { 
    this.thanks.emit('Thank you'); 
  }
}

Now listen to this event in the ParentComponent. The event parameter will give you 'Thank you' text which came from the ChildComponent.

parent.component.html

<app-child [chocolateCount]="chocolate" (thanks)="sayThanks($event)"></app-child>

parent.component.ts

export class ParentComponent {
  chocolate = 0; 
  thankYouText = '';
  sendToChild() { 
    this.chocolate++; 
  }
  sayThanks(event) { 
    this.thankYouText = event; 
  }
}

With this, you saw Parent to Child & Child to Parent Components Communication using @Input() and @Output() decorators in Angular. Hope you enjoyed reading this post. You may refer to the full code here.