Custom Property Binding (& @Input) in Angular 4

Pass data into one component to other component using @Input.

—-HTML file (app.component)

<app-home [ninja]="ninja">hello there!</app-home>

—-TS file (app.component)

ninja = {
  name: 'Ryu',
  belt: 'Red'
}

—-HTML file (home.component)

<p>{{ninja.name}}</p>
<p>{{ninja.belt}}</p>

—-TS file (home.component)

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

export class HomeComponent implements OnInit {
@Input() ninja;

Leave a Reply

Your email address will not be published. Required fields are marked *