Input Decorator

In Angular, component inputs are a key feature that allow data to flow from a parent component to a child component. This mechanism is essential for building dynamic and interactive web applications where components are often dependent on external data to function properly. Here's a detailed explanation of handling component input in Angular:

Using `@Input()`

To accept data from a parent component, a child component must declare an @Input() property. This is done using the @Input() decorator from the @angular/core module.

Basic Usage

Importing Input:-- First, import the Input decorator from @angular/core.
```
import { Component, Input } from '@angular/core';
```

Declaring an Input Property:-- Use the @Input() decorator to define a property as an input property.

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

Passing Data from Parent Component: The parent component can bind a value to this input property in its template.
```

<app-child [data]="parentData"></app-child>
```
Here, parentData is a property of the parent component that you want to pass to the child.

Aliasing Input Properties

You can give an input property a different name when used in templates. This can be useful for various reasons, such as adhering to naming conventions or improving template readability.

@Input('myData') data: string;

In the parent template, you would use myData instead of data:

<app-child [myData]="parentData"></app-child>

Type Checking and Default Values

Type Checking: TypeScript allows you to enforce types for input properties. For example, if data is supposed to be a string, passing a number will result in a compilation error.
Default Values: You can assign default values to input properties. If the parent component doesn’t provide a value, the default value is used.
```
@Input() data: string = 'default value';
```

Handling Changes to Input Properties

To react to changes in input properties, Angular provides a lifecycle hook called ngOnChanges. It is called whenever any data-bound input property changes. The hook receives a SimpleChanges object containing current and previous property values.

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

@Component({
  selector: 'app-child',
  template: `<p>{{data}}</p>`
})
export class ChildComponent implements OnChanges {
  @Input() data: string;

  ngOnChanges(changes: SimpleChanges) {
    if (changes.data) {
      console.log('Data changed:', changes.data.currentValue);
    }
  }
}

Best Practices

Clear Naming Conventions:-- Choose input property names that clearly describe their purpose and are consistent with the rest of your application.
Avoid Complex Objects When Possible:-- Prefer primitive types or simple objects as inputs to make the component easier to use and debug.
Documentation:-- Document input properties, especially if the component is part of a shared library, to make it easier for other developers to understand how to use the component.

Using @Input()​

Basic Usage​

Aliasing Input Properties​

Type Checking and Default Values​

Handling Changes to Input Properties​

Best Practices​