Gallerize with *ngFor does not work

[danfergo]

Bug Report or Feature Request (mark with an x)

- [ x ] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question

OS and Version?

Linux a4887eb4a802 4.13.0-37-generic #42-Ubuntu SMP Wed Mar 7 14:13:23 UTC 2018 x86_64 GNU/Linux

Versions

node v8.9.0
npm 5.5.1

Repro steps

<div *ngFor="let item of items">
     <div [gallerize]="'item-gallery-'+item.id" [innerHTML]='item.content'> </div>
</div>

The log given by the failure

No error, simply does not work.
The gallerizer$.pipe(debounceTime(300), ... is only called for the first *ngFor element and, as a consequence, clicking the item images results in nothing.

Mention any other details that might be useful

The number of images in each item is variable, having no images in the first items.
Also, I'm using this HTML at a child module component so I've imported

        GalleryModule.forRoot(),
        LightboxModule.forRoot(),

At the parent module, and GallerizeModule at the child module.

[MurhafSousli]

In this stackblitz It uses *ngFor and it works properly.
Can you reproduce your issue?

[danfergo]

There it is.
https://stackblitz.com/edit/ngx-gallery-64sgmz?file=app%2Fapp.component.html

[MurhafSousli]

@danfergo It seems that you did not add changeDetection: ChangeDetectionStrategy.OnPush to your component which caused to an infinite loop.

Gallerize uses ngAfterContentChecked to re-look for images when content changes. but here it is firing itself when the strategy is in default mode.

here is a working stackblitz

[danfergo]

Oh allright, I didn't saw that. Thanks a lot!