Can an angular 2 component be used with an attribute selector?

Question

We currently have an existing small Angular 1 project that is used in an on premises Sharepoint 2013 environment. For a large part of our content, we use publishing pages on the Sharepoint environment.

With Angular 1, we could define directives to be restricted to: match attribute name, tag name, comments, or class name . Most of the directives we created were attribute or tag name. The preference would have been tag name, but the publishing platform on Sharepoint strips out unknown elements. So that means we were left with using attributes in order to bring our directives in to the publishing pages. With Angular 2 though, I've only seen components implemented by tag name.

Is it possible with Angular 2 to use attribute names in order to use our components? This is a requirement for us because of the restrictions in the Sharepoint publishing platform.

Thanks.

Answer 1

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.

Answer 2

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>

Answer 3

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

Answer 4

Absolutely. Essentially this is just a CSS selector, so if you need to use attribute you just do this:

@Component({
    selector: "my-tag[with-my-attribute]"
})