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.