Angular2 attribute directive Hostbinding to host attribute

Question

I have a "bootstrapModal" attribute directive that adds bootstrap attributes to the host element:

data-placement="top" data-toggle="modal" data-target="#DefaultModalWindow"

Is it possible to HostBinding to an attribute like this?

<htmltag ... bootstrapModal placement="left">

And in the directive have something like that:

 @HostBinding('attributes.data-placement') // <== this don't work
 @Input() placement:string='top';

So the result should be:

<htmltag ... data-placement="left" data-toggle="modal" data-target="#DefaultModalWindow">

That should work fine if but hard to tell what you are actually trying to accomplish whithout seeing more code. — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 2, 2016 at 6:51

Community · Accepted Answer · 2020-06-20 09:12:55Z

38

This should work:

@HostBinding('attr.data-placement')

2 Comments

It works. Where can I find documentation about these properties? attr? and others

angular.io There aren't many. class, attr, style, style.xxx.px, style.xxx.% (and probably all other valid units). Did I miss some?