How to call pause() function of NgbCarousel on ngOnInit in angular 5

Question

I am new to angular and using ngbootstrap for my ui. I am unable to load NgbCarousel in pause mode by default. Below is code which i have tried

    import { Component, OnInit, ViewChild } from '@angular/core';
    import { NgbCarousel } from '@ng-bootstrap/ng-bootstrap';
    @Component({
      selector: 'app-dashboard',
      templateUrl: './dashboard.component.html',
      styleUrls: ['./dashboard.component.css'],
      providers: [NgbCarousel] // add NgbCarouselConfig to the component providers

    })
     export class DashboardComponent implements OnInit {

    constructor(private auth: AuthService, private ngbCarousel: NgbCarousel) {}
    ngOnInit() {
        this.ngbCarousel.pause();
    }
    }

below is html file :

<div class="jumbotron">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-9">
        <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>
      </div>
    </div>
  </div>
</div>

But pause is not working i am not getting any error. Is this the right way of calling pause method. Please guide me .

Answer 1

EDIT: Please use the AfterViewInit lifecycle hook as this hook is called after the component's views are initialised (see the lifecycle hooks documentation from Angular for more info):

import { AfterViewInit, ViewChild } from '@angular/core';
// ...
export class DashboardComponent implements AfterViewInit {
  @ViewChild('carousel') carousel: NgbCarousel;
  ngAfterViewInit() {
    this.carousel.pause();
  }
}

---

1. Remove the NgbCarousel as a provider on your component, since according to the docs, NgbCarousel is a component and not a service:

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

2. Add a template reference on the <ngb-carousel> element and use a ViewChild with the template reference as the selector, then call pause on the ViewChild instance:

   <ngb-carousel #carousel>
     <!-- ... -->
   </ngb-carousel>
   

   import { AfterViewInit, /* OnInit */, ViewChild } from '@angular/core';
   // ...
   export class DashboardComponent implements AfterViewInit {
     @ViewChild('carousel') carousel: NgbCarousel;
     ngAfterViewInit() {
       this.carousel.pause();
     }
   }
   

Answer 2

To freeze the carousel from the start, set the interval to 0.

You can do this on the HTML:

<ngb-carousel #carousel interval="0">

Or in the constructor: You will need to import NgbCarouselConfig from '@ng-bootstrap/ng-bootstrap', use it in the @Component decorator as a provider. Importing NgbCarousel will be no longer needed for this purpose.

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
  providers: [NgbCarouselConfig] // add NgbCarouselConfig to the component providers

})

export class DashboardComponent implements OnInit {

    constructor(config: NgbCarouselConfig) { 
        config.interval = 0;
    }

    ngOnInit() {}
}