Passing Data From Parent Component To Child Component Using @input() Decorator In Angular

In this article, we’re going to explore how to pass data From Parent Component to Child Component into an Angular

The first step to passing data into an Angular component is to create a custom property to bind to. This is done via “input” binding to pass data from Parent component to child component. This custom input binding is created via the @Input() decorator

@Input decorator

Input (@Input()) is one of the most used decorators in Angular apps.

It is used to pass data from the parent to the child component.

The @Input decorator is for obtaining the data that is passed from a component.

@Input is a decorator to mark a property as an input.

@Input is used to define an input property, to achieve component property binding.

@Input decorator is used to pass data (property binding) from parent to child component

Syntax:-

@Input() variableName: string;

E.g

Parent.component.html

Parent.component.ts

child.component.ts

child.component.html

Output

We can Implement same functionality with Alias also

Parent.component.html

<child [nm]=”kaustubh”></child>

Child.component.ts

@Input(‘nm’) name: string;

Child.component.html

<p>{{ name}}</p>

O/P

Kaustubh

This is how we can achieve data passing from parent component to child

component.