Dynamic items through ngFor

[housebox]

Slider not initialized when items listed through ngFor. Console prints warn like: No items found in

[vdanyliv]

Hi @housebox, you should use lazy load option domReady

[vdanyliv]

Example:

template:

<div class="item" #slideList *ngFor="let item of list | async;">
 <a href="{{item.url}}" target="_blank"><img src="{{item.img}}"></a>
</div>

component:

@ViewChildren('slideList') slideList: QueryList<any>;

ngAfterViewInit() {
    this.slidesReadyRender();
}

private slidesReadyRender() {
    this.slideList.changes.subscribe(() => this.ngxSlider.domReady.next());
}

[vdanyliv]

@housebox can I close this topic?

[housebox]

Your solution was'not working on my side, the problem is with this.ngxSlider.domReady(), i defined ngxSlider as ViewChild, & domReady() triggered, but nothing happens, still not initialized :(

[vdanyliv]

@housebox can you provide code sample?

[lugipfupf]

You need to set the waiteForDom option to true.

This worked for me:

@ViewChildren('carouselItemList')
private carouselItemList:QueryList<any>;

@ViewChild('ngxSlider')
private ngxSlider:ElementRef<NgxTinySliderComponent>;

public tinySliderSettings: NgxTinySliderSettingsInterface = {
        waiteForDom: true,    // note the typo
        ...
};

ngAfterViewInit(): void {
    this.carouselItemList.changes.subscribe(() => this.ngxSlider.domReady.next());
}

This works even though I get the error message "domReady does not exist on type 'ElementRef<NgxTinySliderComponent>'".

[vdanyliv]

@lugipfupf Will add definition in next release

[seanmavley]

@lugipfupf Following your example, doesn't seem to work. Here's my entire code sample:

This is template

  <ngx-tiny-slider [config]="tinySliderConfig" #ngxSlider>
    <ng-container class="items">
      <div class="item" *ngFor="let cardDetail of cardList" #slideList>
        <img [src]="cardDetail.imageUrl"/>
      </div>
    </ng-container>
  </ngx-tiny-slider>

Then in component, I have this

export class CarouselComponent implements OnInit, AfterViewInit {
  @ViewChildren('slideList') slideList: QueryList<any>;

  @ViewChild('ngxSlider')
  private ngxSlider: ElementRef<NgxTinySliderComponent>;

  constructor() {}

  ngAfterViewInit() {
    this.slideList.changes.subscribe(() => this.ngxSlider.nativeElement.domReady.next());
  }

  ngOnInit() {
    this.tinySliderConfig = {
      waiteForDom: true,
      .....
   }
}

When I run this, no errors anywhere, either in console in browser or angular cli console. And the slider doesn't work too.

I've tried the above using this.ngxSlider.nativeElement.domReady.next() and also this.ngxSlider.domReady.next(). None of them work.

@housebox Did you get yours to work?

[vdanyliv]

@seanmavley I will prepare sandbox with working example this week

[seanmavley]

@vdanyliv Actually I got it working as at yesterday.

Same setup I have above. Only change I did was this

  ngAfterViewInit() {
    this.ngxSlider.domReady.next()
  }

• I removed the domReady from the changes subscription, and
• actually called the domReady on the ngxSlider directly, rather than through nativeElement.

Thanks. A sandbox will be great. Looking forward to it.

[vdanyliv]

@housebox @seanmavley @lugipfupf here is the example with dom-ready event https://codesandbox.io/s/ngx-tiny-slider-wait-for-dom-gvvqh

[mksmanjit]

@vdanyliv I used your the code which is there in the sandbox, not getting it properly why you have slider and sliderLazy and tinySliderConfig and tinySliderConfigLazy and you html is not referring to the lazy one and the content is still static in your html.

I am new to this library can you please create one simple example with having *ngFor in your html, so that new user like me can understand it properly.

[vdanyliv]

@mksmanjit don't know why, but template is not up to date.

In any case, you can find info in repo

https://github.com/vdanyliv/ngx-tiny-slider/blob/develop/src/app/app.component.html

UPD: sandbox updated

[mksmanjit]

@vdanyliv Thanks a lot it worked