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">

Answer 1

This should work:

@HostBinding('attr.data-placement')

Plunker

See also

• https://angular.io/guide/template-syntax#attribute-binding