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.

acdcjunior · Accepted Answer · 2017-04-13 01:29:45Z

55

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.

edited Apr 13, 2017 at 1:29

answered Jul 20, 2016 at 4:12

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

acdcjunior Over a year ago

Note: since any CSS selector is valid, you could even use class selectors such as selector: '.my-class-name', which would match any elements with such class.

TehOne Over a year ago

Great. thanks. I didn't see any reference to being able to pull this off when going through the Angular 2 site. So glad this is possible.

Brad Kent Over a year ago

is [attributeName="attributeValue"] supported?

Votemike Over a year ago

The linter that comes with Angular CLI complains about components as attributes. Is there a way to disable that rule on a per file basis?

mfink Over a year ago

@Votemike I haven't found a way to disable the error but if you add an element selector, in addition to the attribute selector, the error goes away. e.g., selector: "my-selector,[my-selector]"

|

JulienD · Accepted Answer · 2019-04-03 01:49:07Z

14

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

edited Apr 3, 2019 at 1:49

JulienD

7,32310 gold badges57 silver badges88 bronze badges

answered Dec 16, 2017 at 10:43

Ankit Chaurasia

8658 silver badges7 bronze badges

Comments

Harry Ninh · Accepted Answer · 2016-07-20 03:41:16Z

10

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>

answered Jul 20, 2016 at 3:41

Harry Ninh

16.8k5 gold badges64 silver badges56 bronze badges

Comments

Alexander Leonov · Accepted Answer · 2016-07-20 03:43:11Z

7

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]"
})

answered Jul 20, 2016 at 3:43

Alexander Leonov

4,8342 gold badges19 silver badges25 bronze badges

1 Comment

Roger Over a year ago

And that would be selected by: <my-tag with-my-attribute></my-tag> but not by <my-tag></my-tag> Correct?

Collectives™ on Stack Overflow

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

4 Answers 4

Is `[attributeName="attributeValue"]` supported?

6 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Is [attributeName="attributeValue"] supported?

6 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Is `[attributeName="attributeValue"]` supported?