Я использую Angular 7 и использую кладку и загруженные изображения js. После вызова API для данных как:
Promise.all( [ this.accountService.getOrgTagType( params ) ] ).then( result => {
/* do work here */
this.ngAfterViewInit();
});
Я показываю кладку в ngAfterViewInit () с некоторым таймаутом, но кладка не работает идеально.
ngAfterViewInit() {
setTimeout (
() => {
if ( document.querySelector( '.organisations-grid' ) ) {
var orgElem = document.querySelector( '.organisations-grid' );
var orgElemmsnry = new Masonry( orgElem, {
// options
itemSelector: '.organisations-grid-item',
columnWidth: '.grid-sizer-3',
horizontalOrder: true,
percentPosition: true,
});
imagesLoaded( orgElem ).on( 'progress', function() {
// layout Masonry after each image loads
orgElemmsnry.layout();
});
}
}, 300
);
}
Как безошибочно показать кладку на Angular? Любые предложения / советы приветствуются.