Angular 8 Tutorial

Angular 8 Introduction History and versions of Angular 8 Architecture of Angular 8 How to install Angular 8 and set-up it. Creating our first Angular 8 app Angular 8 app loading

Difference between Angular And react

Angular vs react

Angular 8 Advantages Disadvantage

Advantage and Disadvantage of Angular 8

Angular 8 file structure

Angular 8 file structure

Angular 8 components

Components of Angular 8

Angular 8 CLI Commands

All CLI commands of Angular

Angular 8 with Bootstrap

How to install bootstrap for Angular 8 Libraries of Angular 8

Angular 8 Routing

Routing in Angular 8

Angular 8 directives

Angular 8 Directives Angular 8 ngIf directive Angular 8 ngFor directive Angular 8 ngSwitch directive Angular 8 ngClass directive Angular 8 ngStyle directive

Angular 8 pipes

Angular 8 Pipes

Angular 8 databinding

Angular 8 Data binding Angular 8 Event binding Angular 8 Property binding Two-way data binding in Angular 8

String Interpolation In Angular 8

Angular 8 String interpolation

Angular 8 forms

Angular 8 Forms Data flow of forms in Angular 8 Creating forms in Angular 8 Testing and validation of forms in Angular 8

Error fixing in Angular 8

Error fixing in Angular 8

Dependency injection and services in Angular 8

Dependency injection services in Angular 8

Angular 8 Animations

Angular 8 Animations

Dynamic components in Angular 8

Dynamic components in Angular 8

Angular 8 Module

Angular 8 Module Deploying an angular 8 app

Introduction of unit testing in angular 8

Unit testing in angular 8

Observables in angular 8

Observables in angular 8

Angular 8 universal

Angular 8 universal

Angular 8 Changes and new features

New features and changes in Angular 8

Conclusion

Angular 8 Conclusion

Angular 8 with Bootstrap

How to install Bootstrap for Angular?

Run the following Command in Command prompt.

npm install–save
[email protected]= > The @3 is essential!
Angular 8 with Bootstrap
Angular 8 with Bootstrap

After that, when we use a project created with Angular CLI 6+, we will have an angular.json file instead of a.angular-cli.jsonfile. In that file, we need to add Bootstrap to the styles[]array, but the path should be node_modules/bootstrap/dist/css/bootstrap.min.css, NOT../node_modules/bootstrap/dist/css/bootstrap.min.css. The leading ../ must not be included.

Angular 8 with CLI

Here, we are using the Angular 8.1.0 version.

Process of adding a bootstrap.css file in the Project

Expand node module (library root folder)

Angular 8 with Bootstrap

Go to the bootstrap folder and expand it.

Annngular 8 Expand Root Folder

Go to dist folder and expand it.

Go to dist folder and expand it

Expand CSS, and we will find "bootstrap.css." Expand bootstrap.css, and we will see bootstrap.min.css

Expand CSS

Open angular.js file and bootstrap.min.css in the style section.

"styles" : [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css " 
 ], 

Bootstrap is installed for your Angular 8 project. We can use it now.



ADVERTISEMENT
ADVERTISEMENT