CODEWITHSUNDEEP
javascriptangulartwitter-bootstrapng-bootstrap
MIN S
MIN S

Reputation: 125

Angular ng-bootstrap carousel not working correctly?

I am trying to implement ngbd-carousel-basic in my Angular project. I just want to place it in the home.component for now. However, this is what I get after I tried following the code in documentation (albeit editing the file from html/ts to .component.html and .component.ts)

enter image description here

So, I am an Angular noob. So perhaps I forgot to include a step? Here are the steps I took so far:

  1. Inside app.module.ts: Imported NgbdCarouselBasic from my file path. Declared it as a declaration. Import NgbModule, and within @NgModule, import NgbModule.forRoot().
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

// Own components
import {NgbdCarouselBasic} from './shared/carousel/carousel-basic.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ViewAllRecordsComponent,
    NgbdCarouselBasic
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    TableModule,
    NgbModule.forRoot()
  ],
  providers: [
    TimeService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
  1. Inside home.component.html:
<ngbd-carousel-basic></ngbd-carousel-basic>

Here are my dependencies. Maybe something is incompatible and I did not realise? 

"dependencies": {
  "@angular/animations": "^5.2.0",
  "@angular/common": "^5.2.0",
  "@angular/compiler": "^5.2.0",
  "@angular/core": "^5.2.0",
  "@angular/forms": "^5.2.0",
  "@angular/http": "^5.2.0",
  "@angular/platform-browser": "^5.2.0",
  "@angular/platform-browser-dynamic": "^5.2.0",
  "@angular/router": "^5.2.0",
  "@ng-bootstrap/ng-bootstrap": "^1.0.4",
  "bootstrap": "^3.3.7",
  "core-js": "^2.4.1",
  "font-awesome": "^4.7.0",
  "jquery": "^3.3.1",
  "postcss": "^6.0.21",
  "primeng": "^5.2.4",
  "rxjs": "^5.5.6",
  "tether": "^1.4.3",
  "webpack": "^3.11.0",
  "zone.js": "^0.8.19"
},

Upvotes: 0

Views: 4425

Answers (1)

S.Sarkar
S.Sarkar

Reputation: 59

Need to add bootstrap css in style.css file by adding below line: @import "~bootstrap/dist/css/bootstrap.css";

Upvotes: 2

Related Questions