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
@Componentinherits.
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.