ng-bootstrap NgbCarousel *ngfor and Methods

    Angular: 4.3.0

    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.28",

    "bootstrap": "^4.0.0-alpha.6"

0、API from (https://ng-bootstrap.github.io/#/components/carousel/api)

Methods

select	Signature: select(slideId: string) Return type: void Navigate to a slide with the specified identifier.
prev	Signature: prev() Return type: void Navigate to the next slide.
next	Signature: next() Return type: void Navigate to the next slide.
pause	Signature: pause() Return type: void Stops the carousel from cycling through items.
cycle	Signature: cycle() Return type: void Restarts cycling through the carousel slides from left to right.

1、how to use Methods

1.1 basic code from (https://ng-bootstrap.github.io/#/components/carousel/examples)

test.html

<ngb-carousel>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=1" alt="Random first slide">
    <div class="carousel-caption">
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=2" alt="Random second slide">
    <div class="carousel-caption">
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=3" alt="Random third slide">
    <div class="carousel-caption">
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
  </ng-template>
</ngb-carousel>

1.2 give id to  carousel

test.html

<ngb-carousel #ngbCarouselid="ngbCarousel">
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=1" alt="Random first slide">
    <div class="carousel-caption">
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=2" alt="Random second slide">
    <div class="carousel-caption">
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=3" alt="Random third slide">
    <div class="carousel-caption">
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
  </ng-template>
</ngb-carousel>

1.3 then can use some Methods

test.html

<button type="button" (click)="ngbCarouselid.prev()" class="btn btn-warning">

prev</button>

<button type="button" (click)="ngbCarouselid.next()" class="btn btn-success">

next</button>

<button type="button" (click)="ngbCarouselid.pause()" class="btn btn-warning">

pause</button><--it seems doesn't work. see

https://github.com/ng-bootstrap/ng-bootstrap/issues/1560

<button type="button" (click)="ngbCarouselid.cycle()" class="btn btn-success">

cycle</button>

1.4 use "select" methods need to give ngbSlide "id"

test.html

<ngb-carousel #ngbCarouselid="ngbCarousel">
  <ng-template ngbSlide id="myfirstSlide">
    <img src="https://lorempixel.com/900/500?r=1" alt="Random first slide">
    <div class="carousel-caption">
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide id="mysecondSlide">
    <img src="https://lorempixel.com/900/500?r=2" alt="Random second slide">
    <div class="carousel-caption">
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide id="mythirdSlide">
    <img src="https://lorempixel.com/900/500?r=3" alt="Random third slide">
    <div class="carousel-caption">
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
  </ng-template>
</ngb-carousel>

1.5 then you can use "select" like

<button type="button" (click)="ngbCarouselid.select('myfirstSlide')" class="btn btn-warning"> first</button>

<button type="button" (click)="ngbCarouselid.select('mysecondSlide')"

class="btn btn-success">second</button>

<button type="button" (click)="ngbCarouselid.select('mythirdSlide')"

class="btn btn-warning"> third</button>

1.6 fix "pause" => interval=0

<ngb-carousel #ngbCarouselid="ngbCarousel" [interval]="0">

2.0 how to use *ngfor

from https://github.com/ng-bootstrap/ng-bootstrap/issues/1397

test.ts

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html'
})

export class CasereportComponent implements OnInit {
slides = [
{
id: 'slide-1',
img: {
url: 'http://lorempixel.com/900/500?r=1',
title: 'Random first slide'
},
description: {
title: 'First slide label',
detail: 'Nulla vitae elit libero, a pharetra augue mollis interdum.'
}
},
{
id: 'slide-2',
img: {
url: 'http://lorempixel.com/900/500?r=2',
title: 'Random second slide'
},
description: {
title: 'Second slide label',
detail: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
}
},
{
id: 'slide-3',
img: {
url: 'http://lorempixel.com/900/500?r=3',
title: 'Random third slide'
},
description: {
title: 'Third slide label',
detail: 'Praesent commodo cursus magna, vel scelerisque nisl consectetur.'
}
}
];
constructor() { }
ngOnInit() {
}
}

test.html

<ngb-carousel>

<ng-template ngbSlide *ngFor="let slide of slides" [id]="slide.id">

<img [src]="slide.img.url" [alt]="slide.img.title">

<div class="carousel-caption">

<h3>{{slide.description.title}}</h3>

<p>{{slide.description.detail}}</p>

</div>

</ng-template>

</ngb-carousel>

3.0 how to use output?

Outputs

slide

A carousel slide event fired when the slide transition is completed. See NgbSlideEvent for payload detail