How to use bootstrap carousel with Angular correctly

Question

There are many questions on stackoveflow. I've gone through some of them:

1. How to implement bootstrap corousel with angular ng-repeat?
2. How to use carousel with Angular : 9 months, no answer.
3. Slides in Bootstrap Carousel are not ... only : 1+ year, no proper answer

Then I tried following this article:

1. How to use bootstrap 4 carousel in angular 5 | 6 and many more.

My code is not working properly. My images are stacked one over the other without animation. No error or warning on console.

Here is my code: carousel.component.html

<div class='container-fluid'>
  <div class='col-12'>
    <ngb-carousel>
      <ng-template ngbSlide>
        <img src="https://content.duckduckgo.com/iu/?u=https%3A%" alt="Random first slide">
        <div class="carousel-caption">
          <h3>10 seconds between slides...</h3>
          <p>This carousel uses customized default values.</p>
        </div>
      </ng-template>
      <ng-template ngbSlide>
         OTHER 4-5 slides
      </ng-template> 
    </ngb-carousel>
  </div>
</div>

carousel.component.ts

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

@Component({
  ...
  providers: [ NgbCarouselConfig ]
})
export class CarouselComponent implements OnInit {

  constructor(config: NgbCarouselConfig) {
    config.interval = 2000;
    config.wrap = true;
    config.keyboard = false;
    config.pauseOnHover = false;
  }

  ngOnInit() {
  }
}

app.module.ts

import { ... } from '@angular/core';
...
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports:      [ BrowserModule, FormsModule, NgbModule ],
  ...
})
export class AppModule { }

Looking into my code this way can very painful. So here is a stackblitz. And here is the screenshot (Zoomed out to 30% to accommodate everything in one image):

Please help me.

Right now I'm calling images from the internet but later I'll keep images locally in my assets/images folder.

And bootstrap is not hard and fast. Please feel free to suggest some other options also.

Answer 1

Your problem is that you have not initialized the carousel module in your app.module file so the app doesnt know what a carousel is.

you will need to add the following module to your global declarations

import { NgbdCarouselBasic } from './carousel-basic';
@NgModule({
  imports: [BrowserModule, NgbModule],
  declarations: [NgbdCarouselBasic],
  exports: [NgbdCarouselBasic],
  bootstrap: [NgbdCarouselBasic]
})

Answer 2

You have forgotten styles:)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

But the better way store this style locally and add them to angular.json

"styles": [
  "src/styles.css",
  "src/bootstrap.min.css"
],