子コンポーネントを作って使う

導入

コンポーネントは複数定義でき、imports に登録すれば親のテンプレートから使えます。まずは子を作って表示するところから。

説明

CardComponent を作り、AppComponent から使います。

@Component({
  selector: 'app-card',
  standalone: true,
  template: `<div style="border:1px solid #ccc; padding:8px; margin:4px; border-radius:8px">カード</div>`,
})
class CardComponent {}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CardComponent],
  template: `
    <h1>カード一覧</h1>
    <app-card></app-card>
    <app-card></app-card>
  `,
})
class AppComponent {}

• 子コンポーネントには自分の selector（app-card）を付けます。
• 親の imports: [CardComponent] に登録すると、テンプレートで <app-card> として使えます。
• 同じ部品を何度でも置けます。

※ 画面の入り口は必ず AppComponent（app-root）です。子は複数書いてもかまいません。

やってみよう

app-card のテンプレートの文言やスタイルを変えて、両方のカードの見た目が変わることを確かめましょう。