Angular guide: Setup Bootstrap with Angular project

angular-guide-bootstrap-setup.md

Setup Bootstrap with Angular

The instructions here are based on this blog... https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a

The method here is using Bootstrap 4 (beta.2) with ng-bootstrap package.

Install ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

Install bootstrap 4

 npm install --save bootstrap@4.0.0-beta-2

Add files to angular-cli.json

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

Import NgbModule Import NgbModule in app.component

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

...

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

(Optionally) Import in other modules If you need to import in other modules, import without the .forRoot() method:

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...]
})
export class OtherModule {
}