Order change via pipe is not detected

[cpoissonnier]

Hello,

When I sort my list with a custom pipe, the order is not changed when I use angular2-masonry. Without angular2-masonry, it works.

<masonry>
	<masonry-brick *ngFor="let item of list | sortBy:dynamicProperty">
		<dsv-item [item]="item"></dsv-item>
	</masonry-brick>
</masonry>

Is there a way to make masonry detect these changes?

[andreasonny83]

I'm having the same problem on my app. This is quite annoying and it would be great to have a solution soon.

[niveo]

Try it.

private elements: HTMLElement[] = [];
private onEventNewElement: EventEmitter<any> = new EventEmitter<any>();

ngOnInit() {
    this.onEventNewElement.subscribe(() => {
            if (this.elements.length > 0) {
                let el = this.elements[0];
                this.elements.splice(0, 1);
                this.initElementImageload(el);
            }
        });
}

private initElementImageload(element) {
        imagesLoaded(element, (instance: any) => {
            this._element.nativeElement.appendChild(element);
            this._msnry.appended(element);
            this.onEventNewElement.emit();
            this.layout();
        });
}

public add(element: HTMLElement) {
        if (this.useImagesLoaded) {
            this.elements.push(element);
            this._element.nativeElement.removeChild(element);
        }
        if (this._element.nativeElement.children.length === 0) {
            this.onEventNewElement.emit();
        }
}

[vugar005]

Hi @cpoissonnier . I had this problem too and fixed this problem. So here is solution.
When order value is changed you need to destroy masonry and reload it. Assign showMasonry attribute to masonry in html like

<masonry *ngIf="showMasonry ">

and initially give it true value. When order value is changed

onOrderValueChanged() {
this.showMasony = false;
setTimeout(() => this.showMasony = true, 20);
}
Hope it helps!

[Panos-Bletsos]

Another way is to force masonry to draw the layout again by calling

this.masonry._msnry.reloadItems();
this.masonry._msnry._isLayoutInited = false;
this.masonry.layout()