What is @Input Decorator in Angular? How to send data from Parent to Child Component in Angular? Custom Property Binding.
In Angular, @Input
is a decorator that allows a value to be passed into a component from its parent component. It is used to declare an input property that can be bound to a value or expression from the parent component's template.
When a property in a child component is decorated with @Input()
, it becomes an input property, which means it can receive data from the parent component. The parent component can then pass data to the child component by binding a value or expression to the input property using property binding syntax.
Here's an example of how to use @Input
decorator:
typescriptimport { Component, Input } from '@angular/core';
@Component({
selector: 'child-component',
template: '<p>{{name}}</p>'
})
export class ChildComponent {
@Input() name: string;
}
In this example, ChildComponent
declares an input property name
using the @Input
decorator. The parent component can bind a value to this property like this:
html<child-component [name]="parentName"></child-component>
In the parent component, the value of parentName
will be passed to the name
input property of the ChildComponent
.
Note that in order to use @Input
, the parent component must declare a binding to the input property in its template using square brackets ([property]="value"
).
Comments
Post a Comment