Dynamic Property Binding for Angular Directive Inputs

Hi I’m making a a drag directive but because of the way it works I can’t get it to work on dynamic objects as it calls the id in the input.

@Input()
set Drag(options: any) {
   this.stickerElement = document.getElementById(options.id);
}

Which works fine when the element isn’t dynamic:

<div id="sticker" class="issues" [Drag]="{id: 'sticker'}">

but when it’s set dynamically I can’t figure out how to interpolate the ID dynamically.

<div [attr.id]="'Session' + Day.id" [Drag]="{id:'Session' + Day.id}"></div>

I’ve tried setting this.stickerElement with the @HostListener when you use it but that allows the directive to bubble and use child elements. I guess I can work around it but it doesn’t feel right.

I feel like I’m missing some knowledge because no matter what I google nothing useful comes up about how to interpolate it correctly. Can you interpolate an attribute into a directive like this?

Thanks in Advance
B

16 thoughts on “Dynamic Property Binding for Angular Directive Inputs”

Leave a Comment