More than 3 years have passed since last update.

【備忘録】Angularのselectorの種類

Posted at 2021-06-12

Angularには以下の三つのディレクティブの種類があります。
・コンポーネント
・構造ディレクティブ
・属性ディレクティブ
ディレクティブはselectorを使うことで効果を及ぼす対象を決めることができます。
セレクターには三つ種類があります。
##要素セレクター

@Component({
    selector: 'app-element',
    template:  './element.component.html',
    styleUrls: ['./element.component.css']
})

以下のHTMLに対して有効。

<app-element></app-element>

##属性セレクター

@Component({
    selector: '[app-element]',
    template:  './element.component.html',
    styleUrls: ['./element.component.css']
})

以下のHTMLに対して有効。

<div app-element></div>

##クラスセレクター

@Component({
    selector: '.app-element',
    template:  './element.component.html',
    styleUrls: ['./element.component.css']
})

以下のHTMLに対して有効。

<div class="app-element"></div>