Template parse errors when use NgbCarousel with ngFor - ng-bootstrap

Question

I want use ngb-carousel with ngFor,My code like this:
code
but this make some error like this:
<ngb-carousel>
<template ngFor let-home [ngForOf]="homes | async" >
<ngbSlide [home]="home">
<img src="{{item.thumb}}" alt="Random first slide">
</ngbSlide>
</template>
</ngb-carousel>
home.component.html?c8ce:1 Error: Template parse errors:(…)
who can give me a example use ngb-carousel with ngFor?

Answer 1

The syntax for ng-bootstrap slides is <template ngbSlide> and we don't have the <ngbSlide> element / component hence the parsing error. What you should be doing instead is to have ngFor generate <template ngbSlide> like so:
<ngb-carousel>
<template *ngFor="let imgIdx of [1, 2, 3]" ngbSlide>
<img src="http://lorempixel.com/900/500?r={{imgIdx}}" alt="Random slide no {{imgIdx}}">
<div class="carousel-caption">
<h3>slide label no {{imgIdx}}</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</template>
</ngb-carousel>
Here is a working plunker showing this in action: http://plnkr.co/edit/FXx9Q0UO14sp0RqbPnVh?p=preview

Answer 2

This might be a late answer, but if your the images from your database or anywhere for that matter is an Array. So you can iterate through them using NgFor on the HTML.
carousel.component.html
<ngb-carousel *ngIf="images!=null">
<div *ngFor="let image of images">
<ng-template ngbSlide>
<div class="picsum-img-wrapper">
<img src="{{image}}" alt="image">
</div>
</ng-template>
</div>
</ngb-carousel>
The ngfor will create ng-template equal to the length of the array.
carousel.component.ts
images = ['image1', 'image2', 'image3'];