Friday, 15 September 2017

Bootstrap install in angular 2 or 4

Ng-Bootstrap is available as a NPM package, so the installation can be done by using the following command in the project directory:

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

Furthermore Ng-Bootstrap required Bootstrap 4 to be added to our project. Install it via:

$ npm install bootstrap@4.0.0-alpha.6

Now add bootstrap.min.css, jquery.min.js and bootstrap.min.js to you .angular-cli.json file, like we did it before.

Once installed you need to import Ng-Bootstrap’s main module NgbModule from the package @ng-bootstrap/ng-bootstrap. Add the following import statement to app.module.ts:

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

Next, we need to add this module to the imports array of the @NgModule decorator. If you want to import NgbModule in your root module (e.g. AppModule) you need to call the forRoot() factory method, as you can see in the following:

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}
If you want to import NgbModule in other modules (child modules of your root application module) you need to add it without calling the forRoot() method:

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


by adding the file paths to the styles and scripts array in file .angular-cli.json:
  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],


http://codingthesmartway.com/using-bootstrap-with-angular/

No comments:

Post a Comment