How to set a component host name with data binding

Question

My component has a variable which is called componentId which is defined as an input of the component:

@Input() public componentId: string;

I want this variable to be interpreted when building the HTML, in order to assign it to the attributename. Something like this:

<customTag name="{{componentId}}"/>

The issue is that customTag has no property name, so when I try to do that I get the exception:

Can't bind to 'name' since it isn't a known property of 'customTag'.

However, if I was doing this:

<customTag name="somename"/>

... in the rendered HTML I can correctly see the attribute name filled with "somename".

What I need is just to use the value of this variable (componentId) as a name of customTag, without need of actually trying to access the property name of the component customTag (on which's code I've no control since it comes from a library).

How can I just read the value of componentId to assign it dynamically to the static attribute name?

Martin Parenteau · Accepted Answer · 2018-04-06 16:11:49Z

3

You can use attribute binding:

<customTag [attr.name]="componentId"></customTag>

answered Apr 6, 2018 at 16:11

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

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

1 Comment

Matteo NNZ Over a year ago

It worked! I'll accept your answer in 8 minutes (doesn't let me yet), thanks a lot!

Collectives™ on Stack Overflow

How to set a component host name with data binding

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related