(angular) binding to data-src

[pliablepixels]

Hi, I know this is not directly related to your excellent plugin - it refers to the angular wrapper that you refer to in your readme. Unfortunately, I am not sure if the author of that wrapper is active.

So I'm posting here incase someone uses this in angular and knows how to resolve how one can bind [data-src] to a variable? (I posted the original issue here https://github.com/aogriffiths/angular-2-holderjs/issues/2)

[imsky]

hmm good question. i'm planning better integration for libraries like Angular, React, etc. for Holder 3

since i don't use Angular 2, i don't have an immediate answer for you, but i could investigate if you post a fiddle that can reproduce your issue (which seems to be placeholders not working with Angular 2).

[pliablepixels]

Hi @imsky,

I've set up an example: https://plnkr.co/edit/ibOyJvmNWadQWOm6Ki7u?p=info (The code is in home.page.ts/html)

The problem is that using either data-binding or expression evaluation does not work in angular. Using a static text value does work

so:

<img holderjs data-src="holder.js/200x200/auto"> works well

however: (assuming myvariable="holder.js/200x200/auto")

<img holderjs data-src="{{myvariable}}"> does not work - if I inspect source, I see that data-src contains the value of my variable but no src tag is added with data:image/<etc>

<img holderjs [data-src]="myvariable"> does not work, it says [data-src] is not a known property of img

So bottom line, I can't use dynamic placeholders

(Note: I am aware I can just define an empty id in the template and use holderjs addImage to programmatically add an image, but for various reasons, I'd prefer to not do this)

thanks!

[pliablepixels]

Hi, this problem was resolved. I forked and created a version that works https://github.com/pliablepixels/angular-2-holderjs

Thank you for offering to look into a problem that was outside your library!

The problem was resolved by this post: https://stackoverflow.com/a/46673111/1361529