@Input in Angular

The @Input decorator in Angular is used to pass **data from a parent component to a child component**. This allows components to be **reusable and dynamic**.

How to Use @Input

1. Parent Component (Sends Data)

The parent component sends data to the child component using **property binding**.

@Component({
    selector: 'app-parent',
    template: '<app-child [userName]="name"></app-child>'
})
export class ParentComponent {
    name = 'John Doe';
}

2. Child Component (Receives Data)

The child component uses the @Input decorator to receive data.

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

@Component({
    selector: 'app-child',
    template: '<p>Hello, {{ userName }}!</p>'
})
export class ChildComponent {
                @Input() userName: string = ''; // Receiving data from parent
}

How It Works

• The parent component **passes data** using property binding: [userName]="name".
• The child component **receives data** using @Input and displays it in the template.
• If the name in the parent component changes, the child component automatically updates.

Advantages of @Input

• Helps in **reusing components** efficiently.
• Enables **dynamic** UI updates.
• Ensures **better separation of concerns** by keeping logic modular.

Conclusion

The @Input decorator is a powerful way to **pass data from a parent to a child component** in Angular, making components reusable and modular.

If you have any questions, feel free to ask. Thank you for reading!