Add Bootstrap and Ngx-Bootstrap


If you want to add bootstrap and/or ngx-bootstrap at your application do the following:

Install bootstrap

npm install bootstrap

Install jquery and popper js (optional)

npm install jquery popper.js

Install ngx-bootstrap

npm install ngx-bootstrap

Register libraries

Inside your angular.json file include the below into your build:

"styles": [
  "./node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles.css"
],
"scripts": [
  "./node_modules/jquery/dist/jquery.js",
  "./node_modules/popper.js/dist/umd/popper.js",
  "./node_modules/bootstrap/dist/js/bootstrap.js"
]

Configuration

Any component you wish to include from the ngx-bootstrap, has to be included at the configuration. Also, do not forget that ngx-bootstrap requires animations to work! 

Below is an example of such configuration:

 

import {ApplicationConfig} from '@angular/core';
import {provideRouter} from '@angular/router';import {routes} from './app.routes';
import {BsDropdownConfig, BsDropdownModule} from "ngx-bootstrap/dropdown";
import {provideAnimationsAsync} from "@angular/platform-browser/animations/async";
import {CommonModule} from "@angular/common";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {BrowserModule} from "@angular/platform-browser";
import {HTTP_INTERCEPTORS, HttpClientModule, provideHttpClient, withInterceptorsFromDi} from "@angular/common/http";
import {MyInterceptor} from "./api.interceptor";

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    HttpClientModule,
    provideHttpClient(withInterceptorsFromDi(),),
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MyInterceptor,
      multi: true,
    },
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    CommonModule,
    provideAnimationsAsync(),
    BsDropdownModule,
    BsDropdownConfig]
};


No files yet, migration hasn't completed yet!