title: Dynamically generated carousel slides using Angular and ngu-carousel
body: <p>I'm trying to create a carousel using <a href="https://github.com/sheikalthaf/ngu-carousel" rel="nofollow noreferrer">ngu-carousel</a> 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 <code>&lt;ng-template #first&gt;</code> inside of a container component which takes in the slides using the <code>[dataSource]</code> --> <code>&lt;ngu-carousel [dataSource]="[first, second, third]"&gt;</code>.'</p>
  
  <p>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 <code>ngFor</code>, like this:</p>
  
  <pre><code>&lt;ng-template ngFor let-item [ngForOf]="items" let-i="index" #dynamicReferenceNeededHere&gt;
     &lt;p&gt;{{item.title}}&lt;/p&gt;
  &lt;/ng-template&gt; 
  </code></pre>
  
  <p>Any help would be very much appreciated.</p>
  
  <p><a href="https://ngu-carousel-demo-mtj9wg.stackblitz.io" rel="nofollow noreferrer">StackBlitz Example (see "static" component and templates)</a></p>