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 includeelement
,[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.