Can an angular 2 component be used with an attribute selector?
Yes, the selector
property of the @Component
decorator is a CSS selector (or a subset of):
selector
:'.cool-button:not(a)'
Specifies a CSS selector that identifies this directive within a template. Supported selectors include
element
,[attribute]
,.class
, and:not()
.
Does not support parent-child relationship selectors.Source: Angular Cheat Sheet / Directive Configuration, which
@Component
inherits.
That way you can use [name-of-the-attribute]
(namely, the CSS attribute selector), such as:
@Component({
selector: "[other-attr]",
...
})
export class OtherAttrComponent {
Se demo plunker here.
The usual way is the CSS type (AKA element or tag) selector:
@Component({
selector: "some-tag",
...
})
And it matches a tag with name some-tag
.
You can even have a component that matches both a tag or an attribute:
@Component({
selector: "other-both,[other-both]",
template: `this is other-both ({{ value }})`
})
export class OtherBothComponent {
Demo plunker contains examples of all three.
Is
[attributeName="attributeValue"]
supported?
Yes. But mind the quotes. In the current implementation, the selector [attributeName="attributeValue"]
actually matches <sometag attributeName='"attributeValue"'>
, so test around before committing to this approach.
Selector property of @Component decorator support, element selector, attribute selector and class selector:
1. Element selector:
@Component({
selector: 'app-servers'
})
Usage: <app-servers></app-servers>
2. Attribute selector:
@Component({
selector: '[app-servers]'
})
Usage: <div app-servers></div>
3. Class selector:
@Component({
selector: '.app-servers'
})
Usage: <div class="app-servers"></div>
Note: Angular 2 does not support id and pseudo selectors
Yes, according to this https://angular.io/docs/ts/latest/guide/cheatsheet.html (Components and Directives are very similar in general). Instead of using element selector:
selector: 'custom-element-name'
Use:
selector: '[custom-attribute-name]'
And in your parent component's template:
<div custom-attribute-name></div>