Bootstrap in Angular7
😎 Installing & Adding Bootstrap in Angular. 💻
Using Bootstrap In Angular.
Using ng-bootstrap with Angular.
First, we’ll start by installing the dependencies using:
$ npm install bootstrap
Next, you need to install ng-bootstrap from npm using the following command:
$ npm install @ng-bootstrap/ng-bootstrap
Wait for the package to install. Next, open the src/app/app.module.ts file and import the main module of ng-bootstrap which is NgbModule into your project’s main module using the following code:
Code:
// […]
import {NgbModule} from ‘@ng-bootstrap/ng-bootstrap’;@NgModule({
// […]
imports: [NgbModule, /* […] */],
// […]
})
export class AppModule {
}
For the sake of making your Angular 7 production bundle smaller, you can also import only the needed modules for the Bootstrap 4 components that you want to use in your project, such as buttons, cards, modals, pagination or alerts. For instance, this is an example for importing the NgbAlertModule module:
Code:
import { NgbAlertModule} from ‘@ng-bootstrap/ng-bootstrap’;
@NgModule({
// […]
imports: [NgbAlertModule, /* […] */],
// […]
})
export class AppModule {
}
You can find all the available components and modules from the official Website:https://ng-bootstrap.github.io/#/components/accordion/examples.
Using bootstrap with Angular.
- First install bootstrap from npm:
$ npm install bootstrap — save
- Next you need to instruct Angular CLI 7 to load the Bootstrap styles.
- There are many ways to do that. The simplest method is by using the src/styles.css file and adding the following code:
code:
@import “~bootstrap/dist/css/bootstrap.css”;
Using ngx-bootstrap with Angular.
- First, you need to install ngx-bootstrap in your project from npm using:
$ npm install ngx-bootstrap
- Next you need to load Bootstrap 4 CSS file using one of the possible ways, such as adding the following code in your src/index.html file:
<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel=”stylesheet”>
Using ng-add and ngx-bootstrap
- Alternatively, you can also use the ng add command of Angular CLI v7 to automatically add ngx-bootstrap to your project by simpy running the following command:
$ ng add ngx-bootstrap
- The CLI will take care of installing all the required files and update it any necessary configuration files in your behalf.
- You can also use the ng add command to add individual components. This is a list of available commands:
ng add ngx-bootstrap — component accordion
ng add ngx-bootstrap — component alerts
ng add ngx-bootstrap — component buttons
ng add ngx-bootstrap — component carousel
ng add ngx-bootstrap — component collapse
ng add ngx-bootstrap — component datepicker
ng add ngx-bootstrap — component dropdowns
ng add ngx-bootstrap — component modals
ng add ngx-bootstrap — component pagination
ng add ngx-bootstrap — component popover
ng add ngx-bootstrap — component progressbar
ng add ngx-bootstrap — component rating
ng add ngx-bootstrap — component sortable
ng add ngx-bootstrap — component tabs
ng add ngx-bootstrap — component timepicker
ng add ngx-bootstrap — component tooltip
ng add ngx-bootstrap — component typeahead
Conclusion:
- In this tutorial, we’ve seen different ways to include Bootstrap 4 in your Angular 7 project such as bootstrap, ng-bootstrap and ngx-bootstrap. We’ve seen how to use the ng add command of Angular CLI v7 to automatically add ngx-bootstrap in your project without any manual intervention.
- You’ve also installed Angular CLI and created a new project.
