@input decorator in Angular 4

 

The @input decorator in angular 4 used to pass the value from parent to child.

<child [review]=books"></child>

it means you can pass the string into your child component itself not a HTML element.  

Parent Component

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

/**
 * App Component
 * Top Level Component
 */

@Component({

  selector: 'app',

  styleUrls: ['./app.component.css'],

  template: `

    <h1>welcome</h1>

    <child [review]=books"></child>

    <p>Done</p>

  `
})

export class AppComponent {
  books:number;
  constructor() {  this.books=25; }

}

Chaild Component

Need to import the @Input decorations.

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

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

@child.component.ts

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

/**
 * App Component
 * Top Level Component
 */

@Component({

  selector: 'child',

  styleUrls: ['./child.component.css'],

  templateUrl: `./child.component.html`

})

export class ChildComponent {

    @Input() review:number;

  constructor( ) {  }   

}

@child.component.html

<p>{{review}}</p>

 

Output

 25// this value passed from parent