Appending to grid from observable/stream

[farantesrodrigues]

I'm updating the DOM by streaming an Observable into an array that feeds ngFor directive. I'm having trouble implementing masonry on this, at least with your angular2 module because each time the array changes, masonry.layout is called. Elements are attached but the transition comes from the same place (the start : top left corner). What I want is to append to masonry grid as soon as the element arrives to the stream. Can I achieve this behavior or appending to the grid from a stream is a feature I have to work on ?

[jelgblad]

Thanks for your input. I will run some test and look into this!

[jelgblad]

Hmm. So your problem is that you want to add an item so that it just pops up without it transitioning into place?

[farantesrodrigues]

yes, but load it asynchronously...

[rowies]

Got the same problem :) would be nice if this works in a future version :D The LayoutComplete fires every time I add an item to the array

[jelgblad]

Yea I see the problem. But it will take some rethinking... Code ideas or PRs on how to fix stuff like this are always welcome!

[maronaquillo]

Setting the transitionDuration to 0 and add css animation on the items solves the append issue but it creates an error Cannot read property 'removeChild' of null when removing some items.

options: MasonryOptions = { transitionDuration: '0', };

[jelgblad]

@maronaquillo what version are you running?

[maronaquillo]

@jelgblad [email protected]

[AbhayVel]

I am having same issue, Still not able to resolve , not able to get it meaning of "add css animation on ". can any one provide detail?

[AbhayVel]

@maronaquillo and @jelgblad

Can you please provide solution for mentioned problem? I am not able to get it?
"Cannot read property 'removeChild' of null when removing some items."

Setting the transitionDuration to 0 and add css animation on the items solves the append issue but it creates an error Cannot read property 'removeChild' of null when removing some items.

options: MasonryOptions = { transitionDuration: '0', };

[jelgblad]

@maronaquillo @AbhayVel is this with useImagesLoaded on or off? Do you still have this issue with [email protected]?

[AbhayVel]

@jelgblad no, I am getting this issue as I have observable list.
Yes, I am using 0.3.0 version only.

[AbhayVel]

@jelgblad , Hi Can you please provide me help on this, Still I am facing following issue.
"Cannot read property 'removeChild' of null when removing some items."

[jelgblad]

@AbhayVel if you could set up a punk showing your problem, that would be really helpful. You can fork this one: https://plnkr.co/edit/mmi5tk6hvzEazYQUGZUC?p=preview

[maronaquillo]

@jelgblad useImagesLoaded is off.
@AbhayVel It's weird but I managed to get rid of the error by setting
transitionDuration: '0.0000001s'

[nick-jonas]

@maronaquillo I have the same issue. Setting transitionDuration: '0.0000001s' does get rid of the error, however I get this long flash on the screen (everything gets wiped off and on) whenever my Observable stream is updated...

[Rich-Squirrel365]

@nick-jonas I am getting the same issue too with "Cannot read property 'removeChild' of null when removing some items." I have set transitionDuration to 0.000001s and the issue is gone but like you I get the screen rendering flash. Did you manage to either get transition 0 working or find a way to get rid of the screen flash?

I am on angular2-masonry 0.4.0

[maronaquillo]

@kedger Did you set it like this? This works on my end.
options: MasonryOptions = { transitionDuration: '0', gutter: 9, };