Problem with dynamic filtering

[wynfred]

Problem with dynamic filtering

[wynfred]

Hi,
You can try this:
@ViewChild(NgxMasonryComponent, {static: false}) masonry: NgxMasonryComponent;
And use the reloadItems function without display:none, in the filter function:

this.portfolioItems = this.items.filter(it => (it.cat === cat || cat === 'all'));
setTimeout(() => this.masonry._msnry.reloadItems())
this.updateMasonryLayout = Date.now().toString();

[barbhackk]

Hi,
You can try this:
@ViewChild(NgxMasonryComponent, {static: false}) masonry: NgxMasonryComponent;
And use the reloadItems function without display:none, in the filter function:

this.portfolioItems = this.items.filter(it => (it.cat === cat || cat === 'all'));
setTimeout(() => this.masonry._msnry.reloadItems())
this.updateMasonryLayout = Date.now().toString();

Thank you it's perfect... I will never have thought of it alone.
You got me out of a sticky situation! Thank you so much.

[dandohotaru]

first take

having hit the wall with the same problem the other day, managed to make it work in conjunction with the proposed updateLayout field and reloadItems (stackblitz)

  <ngx-masonry [options]="options" [updateLayout]="store.stamp">
    <div ngxMasonryItem *ngFor="let item of store.refined; let i = index">

  @ViewChild(NgxMasonryComponent, {static: false}) 
  public masonry: NgxMasonryComponent;

  public filter(category: string){
    this.store.refined = this.store.cached
      .filter(p => p.category == category || category == 'all');
    this.store.stamp = new Date();
    this.masonry.reloadItems();
  }

second take

this solution though seemed a bit hacky to have to trigger a change detection just to to force masonry to redraw itself.
in the end came up with another solution based on reloadItems and layout without the need of an updateLayout field (stackblitz)

  <ngx-masonry [options]="options">
    <div ngxMasonryItem *ngFor="let item of store.refined; let i = index">

  @ViewChild(NgxMasonryComponent, {static: false}) 
  public masonry: NgxMasonryComponent;

  public filter(category: string){
    this.store.refined = this.store.cached
      .filter(p => p.category == category || category == 'all');

    setTimeout(() => {
      this.masonry._msnry.reloadItems();
      this.masonry._msnry.layout();
    });
  }

adding the link to masonry layout docs just for further references
https://masonry.desandro.com/methods.html

[wynfred]

Can you try removing the item from the array instead of set it to display:none, or use the itemSelector option?

[barbhackk]

Can you try removing the item from the array instead of set it to display:none, or use the itemSelector option?

Hi,

If I use removing the item, when I want to display the items that have been hidden previously, it is added to the following.

The itemSelector don't work. I am forced to use 'ngxMasonryItem'

You can look at my code on this page :
https://angular-7wyfeh.stackblitz.io for App
https://stackblitz.com/edit/angular-7wyfeh for Edit

[barbhackk]

Can you try removing the item from the array instead of set it to display:none, or use the itemSelector option?

Hi,

If I use removing the item, when I want to display the items that have been hidden previously, it is added to the following.

The itemSelector don't work. I am forced to use 'ngxMasonryItem'

You can look at my code on this page :
https://angular-7wyfeh.stackblitz.io for App
https://stackblitz.com/edit/angular-7wyfeh for Edit

Any solution ? Thanks.

[zeeshanshanif]

Hi,
You can try this:
@ViewChild(NgxMasonryComponent, {static: false}) masonry: NgxMasonryComponent;
And use the reloadItems function without display:none, in the filter function:

this.portfolioItems = this.items.filter(it => (it.cat === cat || cat === 'all'));
setTimeout(() => this.masonry._msnry.reloadItems())
this.updateMasonryLayout = Date.now().toString();

how it works without using filter just show items in sequence as they are in array?