Simple way to describe Angular @Input/@Output usage

When developing a web application with Angular, it is common to modularize each feature and organize them hierarchically, or pass the data between different components. Input and Output decorator is curical in scenarios like this.

Let’s look at the simple usage concept of Input and Output decorators below.

• @Input decorator — it is used to pass the data down to the child component from the parent component.
• @Output decorator — it is used to emit the value from child component to make parent component get the event.

Suppose we have a requirement to update the main section information from detail section. Thus, the main section passes the information down to detail section, and detail section emit the updated value to main section to make the information updated.

And how do we implement it from the codes? Check out the snippet codes below :)

<!-- Parent Component's Template -->
<app-child [dataFromParent]="parentData" (notifyParent)="handleChildEvent()"></app-child>

// Parent Component

parentData: any;

// to recieve the value from child component
handleChildEvent(): any {}

// Child Component

@Input() dataFromParent: any;
@Output() notifyParent: EventEmitter<any> = new EventEmitter<any>();

// it will be placed inside a function or another appropriate location to trigger it
this.notifyParent.emit();

I guess you will discover that sharing data between a parent component and a child component is simplified to use @Input and @Output decorator.

It is quite straightforward to pass the data or update data between different components. And this concept becomes particularly important in large application with extensive hierarchical levels.

@Input and @Output decorator are important concepts in Angular, yet they are quite simple to implement, wouldn’t you agree?