Angular 7 @Input Decorator Tutorial | Angular Input Decorator

By Digamber Rawat Last updated on
Today I am going to cover up data interaction between components in Angular 7, 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 7 decorator.

In this demo tutorial, I will create a basic Angular 7 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 7 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 7 Project from Scratch

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

It’s time to setup Angular 7 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

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 7 .

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';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

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

  constructor() { }

  addFruit(item) {
    this.fruits.push(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';

@Component({
  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>
<ul>
  <li *ngFor="let item of data">{{item}}</li>
</ul>

Complete GitHub Project Files

GitHub Resources

Digamber Rawat
Digamber Rawat

Full stack developer with a passion for UI/UX design. I create beautiful and useful digital products to solve people’s problem and make their life easy.

Hire Me