Dynamically generated carousel slides using Angular and ngu-carousel

Question

I'm trying to create a carousel using ngu-carousel Angular module but I'm having trouble setting it up so that the carousel slides are dynamically generated from an array of objects. Based on the examples I've seen of this module in use, each slide must be set up with a <ng-template #first> inside of a container component which takes in the slides using the [dataSource] --> <ngu-carousel [dataSource]="[first, second, third]">.'

However, I can't seem to figure out how to set up that local reference to be uniquely generated so that I can create the slides with an ngFor, like this:

<ng-template ngFor let-item [ngForOf]="items" let-i="index" #dynamicReferenceNeededHere>
   <p>{{item.title}}</p>
</ng-template> 

Any help would be very much appreciated.

StackBlitz Example (see "static" component and templates)

Answer 1

Now, your carousel is dynamic, it reads count of items from the items array in static.component.ts; I added another field to your array to show the possibility of using any number of fields in the dynamic carousel;

use your existing stackblitz and change the contents of the 2 files as per the codes below:

make your static.component.ts to be:

import { Component, AfterViewInit, ViewChild, ViewChildren, ChangeDetectorRef } from '@angular/core';
import { NguCarousel, NguCarouselConfig } from '@ngu/carousel';

@Component({
  selector: 'app-static',
  templateUrl: './static.component.html',
  styleUrls: ['./static.component.css']
})

export class StaticComponent {
  name = 'Angular';
  slideNo = 1;
  withAnim = true;
  resetAnim = true; 

  @ViewChild('myCarousel') myCarousel: NguCarousel;

  @ViewChildren('linkRef') linkRefs;

  carouselConfig: NguCarouselConfig = {
    grid: { xs: 2, sm: 2, md: 2, lg: 2, all: 0 },
    load: 3,
    interval: {timing: 4000, initialDelay: 1000},
    loop: true,
    touch: true,
    velocity: 0.2
  }

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewInit() {
    this.cdr.detectChanges();0
  }

  reset() {
    this.myCarousel.reset(!this.resetAnim);
  }

  moveTo(slide) {
    this.myCarousel.moveTo(slide, !this.withAnim);  
  }

  items = [
    { title: 'Slide One', state: 'small' ,subTitle:'sample sub title for 1' },
    { title: 'Slide Two', state: 'small' ,subTitle:'sample sub title for 2' },
    { title: 'Slide Three', state: 'small' ,subTitle:'sample sub title for 3' },
    { title: 'Slide Four', state: 'small' ,subTitle:'sample sub title for 4' },
    { title: 'Slide Five', state: 'small' ,subTitle:'sample sub title for 5' },
    { title: 'Slide Six', state: 'small' ,subTitle:'sample sub title for 6' }
  ];

}

make your static.component.html to be:

<ngu-carousel #myCarousel [inputs]="carouselConfig" [dataSource]="items">
    <div *nguCarouselDef="let item;" class="item">
        <div class="tile">
     <b>{{item.title}}</b> : 
     {{item.subTitle}}
        </div>
    </div>

<!-- this is the ng-teamplate I'd like to use for the carousel slides -->
<!--
<ng-template ngFor let-item [ngForOf]="items" let-i="index" #dynamicReferenceNeededHere>
   <p>{{item.title}}</p>
</ng-template> 
-->
<!--
    <ng-template #first>
        <p>First</p>
    </ng-template>

    <ng-template #second>
        <p>Second</p>
    </ng-template>

    <ng-template #third>
        <p>Third</p>
    </ng-template>
-->

    <button NguCarouselNext class="rightRs">></button>
    <button NguCarouselPrev class="leftRs"><</button>
    <ul class="myPoint" NguCarouselPoint>
        <li *ngFor="let j of myCarousel.pointNumbers; let j = index" [class.active]="j==myCarousel.activePoint" (click)="myCarousel.moveTo(j)"></li>
    </ul>
</ngu-carousel>