Angular でコンポーネントのテンプレートにプロパティバインディングを追加してみました。

気持ちに波があるのか、少し頑張ってしまいました。
やりたいことが少しだったと言うのもありましたが本日２回目の投稿になります。
少しづつですが何となく Angularを理解したつもりになってきています。
早く何か自分のアプリケーションを作ってみたいななんて思っています。
うっ、「調子に乗るなよ！」なんて神の声が聞こえてきました。
それでは、頑張っていきます。

前回のコンポーネントに入力パラメータを追加した続きになります。

１．プログラムを更新します。

１ー１．app.component.ts のテンプレートのタグを更新します。

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HeaderComponent } from './header/header.component';
import { MainComponent } from './main/main.component';
import { Encyclopedia } from './encyclopedia';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, HeaderComponent, MainComponent],
  template: `
  <main>
    <app-header></app-header>
-    <app-main></app-main>
+    <app-main [encyclopedia]="encyclopedia"></app-main>
  </main>
`
})
export class AppComponent {
  encyclopedia: Encyclopedia = {
    id: 999,
    name: 'Test Name',
  };
}

（アウトプット）

ここで新たに表示されるものはありません。エラーにならないこと確認します。

エラーになっていないので、今日のところはここまでです。