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!