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:

typescript
import { 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").