Angular Selector Guide｜Angularのselectorとは？使い方と種類を解説

✅ selectorとは？

selector とは、コンポーネントをHTML内で呼び出すための「名前」（タグ名）です。

Angularコンポーネントの @Component() デコレーターで指定されており、アプリ内の他のHTMLテンプレートに組み込む際に使われます。

🔧 selectorの定義方法

以下は基本的なコンポーネント定義の例です：

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent {}

この場合、HTMLテンプレート内では以下のように記述してコンポーネントを呼び出します：

<app-hello></app-hello>

📛 selector名の命名ルール

基本的に以下のような命名が推奨されます：
app- などの プレフィックス を付ける（プロジェクト名など）
コンポーネントの目的に合った名前にする

selector: 'app-header'
selector: 'app-login-form'