Angular 2 Contact Management Part 3: Components

contact.ts

export class Contact {
  id: number;
  name: string;
  specialization:string;
}

app.component.ts

import { Component } from '@angular/core';
import {Contact} from './contact';


const CONTACTS: Contact[] = [
  { id: 11, name: 'Shalvin', specialization : '.Net' },
  { id: 12, name: 'Praveen', specialization : 'Big Data' },
  { id: 13, name: 'Anuraj', specialization : 'Asp .Net Core' },
  { id: 14, name: 'Praseed', specialization :'C++' },
  { id: 14, name: 'Yaneesh', specialization :'.Net' }
];

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>My Contacts</h2>
    <ul class="Contactes">
      <li  *ngFor="let Contact of Contacts"
        [class.selected]="Contact === selectedContact"
        (click)="onSelect(Contact)">
         {{Contact.name}}
      </li>
    </ul>
    <my-hero-detail [contact]="selectedContact"></my-hero-detail>
  `
})
export class AppComponent {
  title = 'Contact Management 2';
  Contacts = CONTACTS;
  selectedContact: Contact;

  onSelect(contact: Contact): void {
    this.selectedContact = contact;
  }
}

hero-detail.component.ts

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

import { Contact } from './contact';
@Component({
  selector: 'my-contact-detail',
  template: `
    <div *ngIf="contact">
      <h2>{{contact.name}} details!</h2>
      <div><label>id: </label>{{contact.id}}</div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="contact.name" placeholder="name"/>
      </div>
     
    </div>
     
  `
})
export class HeroDetailComponent {
  @Input()
  contact: Contact;
}

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { AppComponent }  from './app.component';
import { HeroDetailComponent } from './contact-detail.component';
@NgModule({
    imports: [
    BrowserModule,
    FormsModule
    ],
      declarations: [
        AppComponent,
        HeroDetailComponent
      ],
      bootstrap: [ AppComponent ]
    })
    export class AppModule { }