Search code examples
imagedomweb-applicationsangularmasonry

How do you get imageLoaded to work with Angular2 and Masonry?

I'm developing an application and am trying to use Angular2 with Masonry and imagesLoaded. I got angular2-masonry to work, but can't seem to find any documentation on how to get imagesLoaded to work with it. right now, all of my bricks overlap. I've done this implementation without Angular2 in a previous app and imagesLoaded resolved the issue perfectly.

How would I implement this? I know angular2 highly discourages direct DOM manipulation. Does angular have a way to check to see if images have loaded? Maybe I could use a structural directive to only display the card when the image finally loads?

Solution

  • I've just followed the instructions in https://www.npmjs.com/package/angular2-masonry and it works fine. My bricks don't overlap anymore. Use useImagesLoaded: 

    <masonry **[useImagesLoaded]="true"**></masonry>

    and don't forget to import the script in your index.html :

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>