Comments (4)
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!
from angular2-masonry.
I'm having the same problem on my app. This is quite annoying and it would be great to have a solution soon.
from angular2-masonry.
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();
}
}
from angular2-masonry.
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()
from angular2-masonry.
Related Issues (20)
- TypeScript files are still in npm storage
- Error loading in library HOT 1
- Cannot build with Webpack HOT 2
- Prepended elements are considered as appended
- watchForHtmlChanges is not working in IE 10
- Trigger layout method HOT 3
- Nothing happens after loading the layout
- Can't make component redraw new array in order. HOT 1
- Add Angular 4+ compatibility HOT 3
- Using the reloadItems function
- Is this project dead? HOT 5
- Images collapse after navigation HOT 2
- Failing to build for production HOT 1
- Alternative for this dead project HOT 4
- useImagesLoaded mess the list HOT 1
- Adding module does not work for Ionic project
- Bricks start from left position initially. HOT 2
- angular2-masonry won't compile under Angular 5 HOT 9
- Production ready? HOT 3
- Server side errors with Angular Universal
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular2-masonry.