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>

Tags:

Angular