Input Decorator In Angular

The @Input decorator in Angular is used to pass data from the parent to child components. It allows a parent component to bind data to properties in a child component enabling the sharing of data between components in a hierarchical relationship.

The @Input decorator is important for communication between components ensuring that the child component can receive data from its parent and act accordingly. In this article, we will explain the input decorator in angular with related examples and outputs for your reference.

What is the @Input Decorator?

The @Input decorator is used to define an input property in a child component. This property can receive data passed from a parent component. The @Input decorator binds the data from the parent to the child components property enabling the child component to utilize this data in its template logic.

Why Use the @Input Decorator?

The @Input decorator is essential for building dynamic and flexible components in Angular. It allows parent components to configure child components by passing in data. This decoupling of data and behaviour between components provides better code organization, promotes reusability, and simplifies testing.

Prerequisites

• Basics of HTML and CSS
• Node JS and NPM

Approach

1. Using @Input with a simple property binding

In this approach you simply declare a property in the child component and decorate it with @Input. This property will be bound to a value from the parent component. When the parent component passes a value to this property the child component can use it directly in its template.

Syntax

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

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

Using @Input with a setter function for custom logic

In this approach the @Input decorator is used in conjunction with setter function and this allows you to perform custom logic whenever the input value is updated such as transforming the data before storing it in the components state. This is useful when you need to process the input data before displaying or using it in the child component.

Syntax

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

@Component({
    selector: 'app-child',
    template: '<p>{{processedData}}</p>',
})
export class ChildComponent {
    private _data: string;

    @Input()
    set data(value: string) {
        this._data = value.toUpperCase(); // Custom logic
    }

    get data(): string {
        return this._data;
    }
}

Steps To Implement Input Decorator

Step 1 : Install Angular CLI

We have already Angular CLI. If you don't have install by using below command.

npm install -g @angular/cli

Step 2 : Create a New Angular Application

Once Angular CLI is installed Now we need create a new angular application by using below command.

ng new input-decorator-demo

Step 3 : Navigate to Project Folder

cd input-decorator-demo

Folder Structure

Step 4 : Generate Components

ng generate component parent
ng generate component child

Step 5 : Modify the Parent and Child Components

Once Parent component is created. Now imports the child component into the parent component by using imports keyword in angular. And we define a message Hello from Parent in the parent component.

//src/app/parent/parent.component.ts

import { Component } from '@angular/core';
import { ChildComponent } from '../child/child.component';

@Component({
    selector: 'app-parent',
    template: '<app-child [data]="parentData"></app-child>',
    standalone: true,
    imports: [ChildComponent],  // Import ChildComponent
})
export class ParentComponent {
    parentData: string = 'Hello from Parent';
}

child.component.ts (approach 1)

In the child component we use input decorator by using @Input with displaying data in the form of paragraph tag. And child component should be standalone true.

//src/app/child/child.component.ts

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

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

Step 6 : Update app.component.html to use the Parent Component

Once logic is developed now its time to update the logic for app component file to display the input decorator data. Here we imports the parent component in to application component.

// src/app/app.component.ts

import { Component } from '@angular/core';
import { ParentComponent } from './parent/parent.component';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    standalone: true,
    imports: [ParentComponent],
})
export class AppComponent { }

app.component.html

Here we change the application html file. In this file we create a custom html tags. These tags are coming from the application component file.

<!-- src/app/app.component.html -->

 <app-parent></app-parent>

Step 7: Run the Application

ng serve

Output