Binding to Custom Properties of Components in Angular

server.component.ts

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

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
  styleUrls: ['./server.component.css']
})
export class ServerComponent implements OnInit {

  // Now this is a property for component
  @Input() firstName: string;

  constructor() {
  }

  ngOnInit() {
  }

}

server.component.html

<p>
  Hello {{firstName}}
</p>

app.component.html

<app-server [firstName]="'Mahmood'"></app-server>
<app-server [firstName]="'Mehdi'"></app-server>

Assigning an Alias to Custom Properties

@Input('selectedHero') hero: string;

References
https://github.com/mhdr/AngularSamples/tree/master/012/my-app

Related