Angular でコンポーネントに入力パラメータを追加してみました。

少しバタバタしていて、中途半端に投稿が止まっていました。
やはり久々に続きをしようと思うと、前回までしてきたところが、
「あれっ？どうするのだっけ？」といろいろ忘れてしまい余計な時間がかかってしまいました。
できる限り続けて勉強しないといけないなと思いました。
そういうことで続き、頑張っていきます。

前回のインターフェイスを作った続きになります。

１．main コンポーネントを作成します。

１－１．新しい汎用コンポーネント作成するコマンドを実行します。

・コマンドプロンプトで以下のコマンドを実行します。
ng generate component main

１－２．app.component.ts に main コンポーネントをインポートします。

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>
  </main>
`
})
export class AppComponent {
  encyclopedia: Encyclopedia = {
    id: 999,
    name: 'Test Name',
  };
}

（アウトプット）

２．Input デコレータと Input プロパティを追加

２－１．main.component.ts に Input デコレーターをインポートします。

- import { Component } from '@angular/core';
+ 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'
})
export class MainComponent {
+  @Input() encyclopedia!: Encyclopedia;
}

（アウトプット）

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

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