How to add Bootstrap to an Angular application

Angular is a great web development platform. In particular, adding the Bootstrap CSS framework to Angular makes the interface elements richer and more dynamic.

 

Condition

Before you begin, you need to install and configure the tools below to create your Angular application.

1. Git : Use this version control system to synchronize repositories.
2. Node.js and npm: Node.js is a JavaScript runtime code tool based on Google's V8 engine. Npm is a package manager for Node.js (Node Package Manager). These tools are used to build and run Angular applications, as well as install libraries.
3. Angular CLI: This is a command-line utility tool for Angular. We will use it to create the basic structure for our Angular app.
4. An IDE, like Visual Studio Code or WebStorm, is a graphical interface tool that helps you develop applications.

How to create an Angular application

Angular is a programming platform for building web, mobile, and desktop apps using HTML, CSS, and TypeScript. To create applications with the Angular framework, you can use @angular/clirouting files and SCSS formatting.

 

ng new angular-bootstrap ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ] CREATE angular-bootstrap/README.md (1062 bytes) CREATE angular-bootstrap/.editorconfig (274 bytes) CREATE angular-bootstrap/.gitignore (604 bytes) CREATE angular-bootstrap/angular.json (3273 bytes) CREATE angular-bootstrap/package.json (1079 bytes) CREATE angular-bootstrap/tsconfig.json (783 bytes) CREATE angular-bootstrap/.browserslistrc (703 bytes) CREATE angular-bootstrap/karma.conf.js (1434 bytes) CREATE angular-bootstrap/tsconfig.app.json (287 bytes) CREATE angular-bootstrap/tsconfig.spec.json (333 bytes) CREATE angular-bootstrap/src/favicon.ico (948 bytes) CREATE angular-bootstrap/src/index.html (302 bytes) CREATE angular-bootstrap/src/main.ts (372 bytes) CREATE angular-bootstrap/src/polyfills.ts (2820 bytes) CREATE angular-bootstrap/src/styles.scss (80 bytes) CREATE angular-bootstrap/src/test.ts (743 bytes) CREATE angular-bootstrap/src/assets/.gitkeep (0 bytes) CREATE angular-bootstrap/src/environments/environment.prod.ts (51 bytes) CREATE angular-bootstrap/src/environments/environment.ts (658 bytes) CREATE angular-bootstrap/src/app/app-routing.module.ts (245 bytes) CREATE angular-bootstrap/src/app/app.module.ts (393 bytes) CREATE angular-bootstrap/src/app/app.component.scss (0 bytes) CREATE angular-bootstrap/src/app/app.component.html (23809 bytes) CREATE angular-bootstrap/src/app/app.component.spec.ts (1090 bytes) CREATE angular-bootstrap/src/app/app.component.ts (222 bytes) ✔ Packages installed successfully. Successfully initialized git.

Now we need to install Bootstrap and its libraries bootstrap-icons, which contain the files with Bootstrap styles and JavaScript code as follows:

npm install bootstrap bootstrap-icons

After installation, we will configure the Bootstrap libraries bootstrap-icons. Modify the file angular.jsonand add the following files bootstrap.scss: , bootstrap-icons.css, bootstrap.bundle.min.jsas shown below:

 

"styles": [ "node_modules/bootstrap/scss/bootstrap.scss", "node_modules/bootstrap-icons/font/bootstrap-icons.css", "src/styles.scss" ], "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" ]

Now we will install the @ng-bootstrap/ng-bootstrapnative Angular support library:

npm install @ng-bootstrap/ng-bootstrap@next

After installation, we will import the module NgbModule. Modify the file app.moduleand add the lines below:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; imports: [ BrowserModule, NgbModule, AppRoutingModule, ],

Now we will remove the contents of the AppComponent class from the file src/app/app.component.ts. Import the service NgbModaland create an open method to open a modal as shown below.

import { Component } from '@angular/core'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent { constructor(private modalService: NgbModal) { } public open(modal: any): void { this.modalService.open(modal); } }

Next, we will delete the contents of the file src/app/app.component.html. Add some HTML elements to view and inspect the elements as shown below.

 Email address Example textarea