Learning TypeScript 2.x - Second Edition

Working with @Attribute and @Input

In the preceding section, we learned that the AppComponent renders the AppLayout component. In this section, we are going to look at the AppLayout:

import { Component, OnInit } from "@angular/core"; 
import { Route } from "../components/header.component"; 
 
@Component({ 
  selector: "app-layout", 
  template: ` 
    <div> 
        <app-header 
            bg="primary" 
            title="TsMovies" 
            rootPath="" 
            [links]="appRoutes" 
        ></app-header> 
        <main> 
            <router-outlet></router-outlet> 
        </main> 
    </div> 
  ` 
}) 
export class LayoutComponent { 
    public appRoutes: Route[] = [ 
        { label: "Movies", path: "movies" }, 
        { label: "Actors", path: "actors" } 
    ]; 
} 

The Layout component uses the app-layout selector and declares an inline template. The template uses two other components ...