NashTech Insights

A Guide to @Input and @Output decorators in Angular

Table of Contents
@Input, @Output decorators in angular


Angular is a popular JavaScript framework used for building web applications. One of the key features of Angular is its ability to create reusable components. To enhance component communication, Angular provides decorators such as @Input and @Output. In this blog, we will explore the concepts of @Input and @Output in Angular and understand how they facilitate data flow between components.

1. Understanding @Input

The @Input decorator allows data to flow from a parent component to a child component. It establishes a one-way binding, where the parent component can pass data to the child component as an input property. The child component can then utilize this data within its template or logic.

a. Syntax

To define an input property, use the @Input decorator followed by the property name in the child component. For example:

@Input() myProperty: string;

In the parent component template, you can bind a value to this property:

<app-child [myProperty]="parentValue"></app-child>

Here, parentValue is a property defined in the parent component.

b. Usage

The child component can access the value of myProperty and use it within its template or logic. Any changes made to the input property in the parent component will automatically reflect in the child component.

2. Understanding @Output

The @Output decorator allows a child component to send data or trigger events to its parent component. It establishes a one-way binding in the opposite direction, from child to parent. This enables communication between components and facilitates interactivity in the application.

a. Syntax

To define an output property, use the @Output decorator followed by an EventEmitter object. For example:

@Output() myEvent: EventEmitter<any> = new EventEmitter<any>();

In the child component template or logic, you can trigger the event using the EventEmitter:


b. Usage

The parent component can listen to the output event emitted by the child component using event binding. For example:

<app-child (myEvent)="handleEvent($event)"></app-child>

In the parent component, define a method handleEvent() to handle the emitted event and access the data sent by the child component.

3. Two-Way Data Binding using [(ngModel)]

Angular provides a shorthand notation for two-way data binding using [(ngModel)]. It combines the functionality of @Input and @Output into a single directive, simplifying the code and enhancing productivity.

a. Syntax

To use [(ngModel)], import the FormsModule in the module and then bind it to a property in the component template:

<input [(ngModel)]="property">

Any changes made to the input field will automatically update the property value, and vice versa.


In Angular, the @Input and @Output decorators play a crucial role in component communication. The @Input decorator facilitates passing data from a parent component to a child component, while the @Output decorator allows the child component to send data or trigger events to its parent. Happy Coding!

Finally, for more such updates and to read more about such topics, please follow our LinkedIn page Frontend Competency



Aanchal Agarwal is a Software Consultant at NashTech. Her practice area is web development. She is recognized as a multi-talented, multitasker, and adaptive to the different work environments. Her hobbies include watching movies, listening to music, and traveling. She likes to read books and explore new things.

Leave a Comment

Your email address will not be published. Required fields are marked *

Suggested Article

%d bloggers like this: