Angular 16 @Input Decorator Tutorial with Example

Last Updated on by in Angular
Today I am going to cover up data interaction between components in Angular, It’s a very important topic.In this topic I will be teaching you how you can send data from parent component to child component using @Input Angular decorator.

The @Input decorator in Angular is used to define an input property for a component.

It allows values to be passed into a component from its parent component or template. The @Input decorator is part of the Angular core library and is imported from the @angular/core module.

In this demo tutorial, I will create a basic Angular application from scratch. Then I will create a child component, and after that, I will be sending data from the parent component to child component using the @Input decorator.

What Angular input decorator is?

Angular provides @Input and @Output APIs to communicate between components.

@Input in Angular belongs to the TypeScript family and as far as @Input() decorator is concerned we all are familiar with TypeScript and how flexible it is.

Setting Up Basic Angular Project for Data Interaction Demo

01. Prerequisite

– Setup Node JS development environment

In order to create this demo app you must have Node JS development environment set up in your machine.

Please follow this link How to Set up Node JS Development Environment?

02. Install Angular CLI

Angular projects are developed using Angular CLI, it’s an official tool.

Hit the given below command to install the Angular CLI, ignore if Angular CLI is already installed.

npm install @angular/cli -g

03. Set up Angular Project from Scratch

I will be creating an employee record management system with Angular, in this demo app i will consume RESTful API via HttpClient service.

It’s time to setup Angular project, run the following command in Angular CLI.

ng new input-angular

It will ask you the following questions…

Would you like to add Angular routing?
Select y and Hit Enter.

Which stylesheet format would you like to use? (Use arrow keys)
Choose CSS and hit Enter

After that your project will start creating, Once the project is created then don’t forget to get into the project’s folder.

cd input-angular

In order to remove strict type warnings or errors make sure to set “strict”: false and "strictTemplates": false under compilerOptions and angularCompilerOptions properties in tsconfig.json file.

Let’s create a child component to send data from parent component.

ng g c child

Now you are all set to play with @Input() Decorator in Angular .

Send Data From Parent Component to Child Component Using @Input() Decorator

This is going to be our parent component where i will create a fruits array and this fruit array’s data i will send to child component.

Go to app.component.ts file, and paste the below code.

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

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

export class AppComponent {
  fruits = ['Mengo', 'Orange', 'Banana'];

  constructor() { }

  addFruit(item) {

In our app component’s html file i am using a simple form which is helping me to add a fruit into the fruits array. And that <app-child> selector from child component taking that data and showing in it self using @Input decorator.

Go to app.component.html file, and paste the below code.

<input #newFruit type="text" placeholder="Enter a new fruit">
<button (click)="addFruit(newFruit.value)">Add Fruit</button>

<app-child [data]="fruits"></app-child>

Setting up Data in Child Component using @Input() Decorator

Go to child.component.ts file, and the following code.

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

  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']

export class ChildComponent {

  @Input() data: string[];


Go to child.component.ts file, and the following code.

<h1>Fruit List</h1>
  <li *ngFor="let item of data">{{item}}</li>

The following command will start a development server, and start your app.

ng serve --open

Digamber - Author

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.