別のコンポーネントのテンプレートを呼び出す[Angular]

別のコンポーネントのテンプレートを呼び出す

Angular18のバージョンで実装していきます。

まずは別のコンポーネントとして、TestComponentを作ります。

import { Component } from '@angular/core';

@Component({
  selector: 'app-test',
  standalone: true,
  imports: [],
  templateUrl: './test.component.html',
  styleUrl: './test.component.scss'
})
export class TestComponent {

}

上記の、selector: ‘app-test’、というのが重要で、このセレクタを、以下のように、
呼び出し元のテンプレートで、htmlタグとして宣言すると、別のコンポーネントのテンプレートを呼び出すことができます。

<app-test></app-test>