Add attributes to Angular 2 Component Selector

Question

I would like to add attributes to the custom selector I create in the angular 2 component implementation.

@Component({
selector: 'my-node',     // add attributes to this selector 
template: `<div> <ng-content></ng-content> </div>`    
})

So that when I do <my-node> The dom generates the selector with these extra attributes

<my-node flex="25" layout="row">

I don't want to hard code these attributes every time I do <my-node>. I want those attributes to be part of the selectors constructed template.

Something like this is what Im looking for but not seeing anything like it in the api

@Component({
selector: 'my-node',     
selectorAttributes: `layout="row"`  // generates <my-node layout="row">
template: `<div> <ng-content></ng-content> </div>`    
})

What are you trying to achieve? Why not put them on the root element of the template? — jonrsharpe
– jonrsharpe, Commented Nov 2, 2016 at 20:27

Yaroslav Grishajev · Accepted Answer · 2016-11-02 21:27:14Z

11

Use host of @Component metadata property.

@Component({
   selector: 'my-node',     // add attributes to this selector 
   template: `<div> <ng-content></ng-content> </div>`,
   host: { // this is applied to 'my-node' in this case
      "[class.some-class]": "classProperty", 
      "[attr.some-attr]": "attrProperty", 
   },   
})

Here is an example plunk . See app/app.component.ts

edited Nov 2, 2016 at 21:27

answered Nov 2, 2016 at 20:34

Yaroslav Grishajev

2,13719 silver badges22 bronze badges

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

10 Comments

ndesign11 Over a year ago

Adding host: '[attr]="componentProp"' errors, can you link to docs with this "host:" implementation please?

ndesign11 Over a year ago

Pretty sure this is what I need but still get errors. Can't bind to 'attr' since it isn't a known property of 'my-node'.

ndesign11 Over a year ago

If 'my-node' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

Yaroslav Grishajev Over a year ago

"[attr]": ''prop" would work if attr is a native property like disabled. In other cases use "[attr.yourAttr]": ''prop"

Yaroslav Grishajev Over a year ago

I added an example plunk to the answer. Hope it helps

|

Martin · Accepted Answer · 2016-11-02 23:40:51Z

8

Another option is to use the HostBinding dectorator

@HostBinding('attr.layout')
layout = 'row';

answered Nov 2, 2016 at 23:40

Martin

16.4k4 gold badges51 silver badges58 bronze badges

1 Comment

vince Over a year ago

This one worked great for me. I think it is the best solution because you can put it next to the other class variables like inputs, outputs, private / public component info, etc. It also allows you to predictably set values and get Typescript to analyze your code if you want to evaluate a function as your HostBinding value.

Collectives™ on Stack Overflow

Add attributes to Angular 2 Component Selector

2 Answers 2

10 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related