Zenn
📚

Syntax of Angular Component Slectors

2022/12/08に公開
Angular
typesciprt
tech

Angular component selector identifies the element in a template and instantiate a component instance.

Component selector syntax is the same as the CSS selector. Currently Angular supports the following selectors.

1. Element Name Selector

As you often see, you can use element-name selector.

Component

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

html

<app-element></element>

2. Attribute Selector

You can also use Attribute selector. You add brackets to Attribute name.

Component

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

HTML

<p app-element></p>

Merit of Attribute Selector

You can bind @Input value to the selector name.

Component

@Component({
    selector: '[app-element]',
    template:  './element.component.html',
    styleUrls: ['./element.component.css']
})
class AppElementComponent {
   @Input("app-element") count: number
}

HTML

<p [app-element]="10"></p>

4. Element name and Attribute selector

You can use attribute selector to select only specific element.

Component

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

HTML

<div app-element></div>

5. [attribute=value] selectors and

Component

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

HTML

<div [active]="true"></div>

6. CSS Selector

You can use css selector.

Component

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

HTML

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

参考

Discussion