Passing data between Angular components with @Input

If you want to pass the data from parent to child components in Angular application, I hope this article will help you to find the answer.

Recently, I described the process of passing data between child and parent components in Angular using @Output and EventEmitter.

Now it’s time to show you the capabilities of @Input decorator for data sharing between parent and child components.

Getting started

Let’s start with initializing new Angular app using Angular CLI.

ng new angular-output

Answer the routing and style questions and generate new project.

Now, let’s generate two components – ParentComponent and ChildComponent.

cd angular-output
ng generate component parent
ng generate component child

Passing data from parent to child component

Let’s say we would like to pass the string value from the text input element placed in ParentComponent to the ChildComponent and display it there.

So we add the input in ParentComponent HTML template.

<div>
  <input type="text" placeholder="Enter your text here..." (keyup)="setInputData($event.target.value)"/>
</div>

Now, we have to implement setInputData method that will receive $event.target.value (text value from input element) every time user presses and releases the key (keyup event).

Take a look at the ParentComponent code.

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss']
})
export class ParentComponent {

  inputText: string;

  setInputData(text: string) {
    this.inputText = text;
  }

}

In order to pass the data to ChildComponent let’s prepare the component’s code for it.

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent {

  @Input() text: string;

}

As you can see @Input decorator is used here. Data passed from ParentComponent will be available with text variable of string type.

In order to receive the data in ParentComponent let’s go back to the ParentComponent HTML template code and use [text] property binding and pass inputText field value there.

<app-child [text]="inputText"></app-child>

In this way you’re actually passing inputText variable from ParentComponent and you’re ready to use it as text variable in ChildComponent.

Go back to the ChildComponent template and use interpolation to display text variable.

{{ text }}

Let’s go live

Before running the project, don’t forget to replace auto-generated welcome page in app.component.html.

<app-parent></app-parent>

Now the application is ready to run.

ng serve

Browse to http://localhost:4200 and test the results.

The text from input element should appear below it.

And that’s it. I hope it will be helpful during components data flow design in your Angular app.

Good luck!