import { Component , OnInit } from '@angular/core' ; import { Router } from '@angular/router' ; interface Customer { id : number ; name : string ; } @ Component ( { selector : 'app-customer' , styleUrls : [ './customer.component.css' ] , template : `
    <p>Customer List</p>
    <ul>
      <li *ngFor="let customer of customers">
        <a
          [routerLink]="['/customer', customer.id]"
          [routerLinkActiveOptions]="{ exact: true }"
          routerLinkActive="active"
          >{{ customer.name }}</a
        >
      </li>
    </ul>
    <router-outlet></router-outlet>
  ` , } ) export class CustomerComponent implements OnInit { customers : Customer [ ] ; constructor ( private router ) { } ngOnInit ( ) { this . customers = [ { id : 1 , name : 'Lee' } , { id : 2 , name : 'Kim' } ] ; } }