Angular @Input()

One of the ways we can pass data from a parent to a child is by using the @Input decorator. The data passed can be in any form. Let’s examine how to do this in code…

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

@Component({
    selector: 'app-child',
    template: `<h2>How you doin', {{yourName}}?</h2>`
})

export class AppChildComponent {
    yourName = 'John';
}

@Component({
    selector: 'app-root',
    template: `
        <h2>Greetings, {{otherName}}!</h2>
        <app-child></app-child>
        `
})

export class AppComponent {
    otherName = 'Harry';
}

Since AppComponent is utilizing <app-child>, it is the parent component to the AppChildComponent. To send data, the @Input decorator uses the child component properties. To accomplish this feature, we have to alter the child component as follows…

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

@Component({
    selector: 'app-child',
    template: `<h2>How you doin', {{yourName}}?</h2>`
})

export class AppChildComponent implements OnInit {
    @Input() yourName: string;
    constructor(){}
    ngOnInit(){}
}

So I altered the yourName property by adding the @Input decorator. This allows this property to be set from the parent component. Now we need to change the parent component to pass the data to the child…

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

@Component({
    selector: 'app-root',
    template: `
        <h2>Greetings, {{otherName}}!</h2>
        <app-child [yourName]="childMsg"></app-child>
        `
})

export class AppComponent {
    otherName = 'Harry';
    childMsg = 'John';
}

In the parent component, I am setting the value of the child’s yourName property in the <app-child> element. To get this done, I am passing the data to the child component property inside the square brackets and assigning a value. I could hard code the value in the quotes within the element, or use a parent property as I have done here.

Happy Coding!

Clay Hess