What is @Input decorator in Angular?

The @Input decorator in Angular is used to pass data from a parent component to a child component. It allows a parent component to pass data to a child component, which can then be used within the child component’s template or logic.

When a component is marked with the @Input decorator, it becomes a property of the component that can be bound to from the parent component’s template. This allows the parent component to pass data down to the child component, which can then use that data to update its own state or render content.

Here is an example of how the @Input decorator is used in Angular:

		
			// Parent component
			import { Component } from '@angular/core';

			@Component({
			  selector: 'app-parent',
			  template: `
			    
			  `
			})
			export class ParentComponent {
			  parentData = 'Hello from parent';
			}

			// Child component
			import { Component, Input } from '@angular/core';

			@Component({
			  selector: 'app-child',
			  template: `
			    
{{ data }}
			  `
			})
			export class ChildComponent {
			  @Input() data: string;
			}
		
	

In this example, the ParentComponent is passing the parentData property down to the ChildComponent using the @Input decorator. The ChildComponent then uses this data to render the content within its template.

The @Input decorator is an essential feature of Angular that allows for easy communication between parent and child components. It is commonly used in building complex data-driven applications and is a valuable tool for passing data between components in a clear and organized manner.

Overall, the @Input decorator is a crucial aspect of Angular development and understanding its usage is essential for anyone working with Angular components and templates.