Welcome to ngx-bootstrap!

The best way to quickly integrate Bootstrap 5 , Bootstrap 4 , Bootstrap 3 Components with Angular

Schematics

The ngx-bootstrap library contains Angular Cli Schematics to allow easier installation. You can add ngx-bootstrap with one simple command.

ng add ngx-bootstrap

Alternative installation methods can be found there

When you install ngx-bootstrap with Angular Cli Schematics you will get such updates:

  • package.json

    List of dependencies will be updated with 2 new packages "bootstrap": "^5.1.3", "ngx-bootstrap": "8.0.0". After packages will be installed and node_modules folder will be updated also.

  • Depending on which style extension is used in the project, schematics will add necessary imports or styles links. It, as expected, allows the use SCSS or CSS extensions.

    In case CSS extension - angular.json file will be updated.

    "styles": [
        "./node_modules/bootstrap/dist/css/bootstrap.min.css",
        "./dist/ngx-bootstrap/datepicker/bs-datepicker.css",
        
    ]
              

    In case SCSS extension - for updating will be used main style file (standard ex. styles.scss).

    /* Importing Bootstrap SCSS file. */
    @import"~bootstrap/scss/bootstrap";
    /* Importing Datepicker SCSS file. */
    @import"node_modules/ngx-bootstrap/datepicker/bs-datepicker";
              

    If the project will not have any style file or project will not have style files with available extensions - project will be updated with default CSS extension (first case).

  • The project's main module (standard ex. app.module.ts) will be updated with import of BrowserAnimationsModule, if it has not been previously imported.

    // added import of BrowserAnimationsModule to app.module.ts by ngx-bootstrap schematics
    import {{'{'}} BrowserAnimationsModule {{'}'}} from '@angular/platform-browser/animations';
    
    @NgModule({{'{'}}
        declarations: [
          AppComponent
        ],
        imports: [
            
            BrowserAnimationsModule,
        ],
        providers: [],
            bootstrap: [AppComponent]
        {{'}'}})
              

ngx-bootstrap's ng add schematic allows the easy installation. Additionally specific modules can be installed directly to a module with the following flag.

ng add ngx-bootstrap  --component accordion

Property component accepts name of component which should be added into project.

  • If ngx-bootstrap has been installed previously, in this case will be updated only project's main file (standard ex. app.module.ts)

    // added import of AccordionModule to app.module.ts by ngx-bootstrap schematics
    import {{'{'}} AccordionModule {{'}'}} from 'ngx-bootstrap/accordion';
    
    @NgModule({{'{'}}
        declarations: [
          AppComponent
        ],
        imports: [
            
            AccordionModule.forRoot(),
        ],
            bootstrap: [AppComponent]
        {{'}'}})
              
  • If library hasn't been installed before updates will include changes from Installation also.

    All available values for property component are:

    • accordion
    • alerts
    • buttons
    • carousel
    • collapse
    • datepicker
    • dropdowns
    • modals
    • pagination
    • popover
    • progressbar
    • rating
    • sortable
    • tabs
    • timepicker
    • tooltip
    • typeahead

Note: Styles for datepicker will be added only if you add all library or use property component with datepicker

More information for each of the components you can find in Components.

One more property which can be used with ngx-bootstrap schematics is stylesExtension. This property accepts preferred style extension and update project regarding these use cases

For more information ngx-bootstrap's schematics you can always use the help command

ng add ngx-bootstrap --help