Angular でコンポーネントのテンプレートに補間を追加しました。

キリが悪かったのでキリのいいところまでやり終えました。
早速、記事を投稿します。
前回からの続きで全く画面更新がなく、ほんとにうまくいってるのか心配でした。
ようやく、思ったとおりに動いていることが確認できました。
何回にも分けて投稿しましたが、ひとつの記事にしてもいいのかなと思いました。
それはそれで、今日の勉強した記録を残します。

前回のコンポーネントのテンプレートにプロパティバインディングを追加した続きになります。

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

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

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

@Component({
  selector: 'app-main',
  standalone: true,
  imports: [],
-  templateUrl: './main.component.html',
-  styleUrl: './main.component.css'
+  template: `
+  <h3>ID:{{ encyclopedia.id}}</h3>
+  <h3>NAME:{{ encyclopedia.name}}</h3>
+`
})
export class MainComponent {
  @Input() encyclopedia!: Encyclopedia;
}

（アウトプット）

main.component.ts の ID、NAME に app.component.ts で設定した値が表示されました。

無事に思ったとおりになりました。