CODEWITHSUNDEEP
angular
TehOne
TehOne

Reputation: 2659

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

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.

Upvotes: 31

Views: 47812

Answers (4)

Ankit Chaurasia
Ankit Chaurasia

Reputation: 865

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

Upvotes: 14

acdcjunior
acdcjunior

Reputation: 135812

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.

Upvotes: 55

Alexander Leonov
Alexander Leonov

Reputation: 4794

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

Upvotes: 7

Harry Ninh
Harry Ninh

Reputation: 16758

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>

Upvotes: 10

Related Questions