We will see how to use Bootstrap to style apps built using Angular 10.
We'll see how to integrate Angular with Bootstrap, in various ways including using ng-bootstrap and ngx-bootstrap packages.
These are the steps of our tutorial:
- Step 1 - Installing Angular CLI v10
- Step 2 - Installing Bootstrap 4 in Your Angular 10 Project
- Step 3 (Method 1) - Adding Bootstrap 4 to Angular 10 Using angular.json
- Step 3 (Method 2) - Adding Bootstrap 4 to Angular 10 Using index.html
- Step 3 (Method 3) - Adding Bootstrap 4 to Angular 10 Using styles.css
- Alternative Step - Adding Bootstrap 4 Using ng-bootstrap and ngx-bootstrap
Step 1: Installing Angular CLI v10
$ npm install -g @angular/cli
After the installation, you'll have at your disposal the ng utility. Let's use it to generate a new Angular 10 project.
$ ng new angular-bootstrap-examples
You will be prompted for a couple of questions:
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS
SCSS [ https://sass-lang.com/documentation/syntax#scss ]
Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
Less [ http://lesscss.org ]
Stylus [ http://stylus-lang.com ]
Most importantly, choose CSS as the stylesheet format because we'll use ths CSS version of Bootstrap in our tutorial.
The command will generate the directory structure and necessary files for the project and will install the required dependencies.
Next, navigate inside the root folder of your project
$ cd angular-bootstrap-examples
You can then serve your Angular 10 application using the ng serve command as follows:
$ ng serve
Step 2: Installing Bootstrap 4 in Your Angular 10 Project
In this step, we'll proceed to add Bootstrap 4 to our Angular 10 application.
There are various ways that you can use to install Bootstrap in your project:
Installing Bootstrap from npm using the npm install command,
Downloading Bootstrap files and adding them to the src/assets folder of your Angular project,
Using Bootstrap from a CDN.
Let's proceed with the first method. Go back to your command-line interface and install Bootstrap 4 via npm as follows:
$ npm install --save bootstrap
This will also add the bootstrap package to package.json.
As the time of writing this tutorial, bootstrap v4.3.1 will be installed.
The Bootstrap 4 assets will be installed in the node_modules/bootstrap folder. You'll need to tell Angular where to look for them.
Next, you also need to install jQuery using the following command:
$ npm install --save jquery
At the time of this tutorial jquery v3.4.1 will be installed.
Step 3:Adding Bootstrap 4 to Angular 10 Using angular.json
Open the angular.json file of your project and include:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular-bootstrap-examples": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/angular-bootstrap-examples",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"
]
},
Step 3: Adding Bootstrap 4 to Angular 10 Using index.html
You can also include Bootstrap files from node_modules/bootstrap using the index.html file.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular Bootstrap 4 Examples</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<app-root></app-root>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
Step 3: Adding Bootstrap 4 to Angular 10 Using styles.css
We can also use the styles.css file to add the CSS file of Bootstrap to our project.
Open the src/styles.css file of your Angular project and import the bootstrap.css file as follows:
@import "~bootstrap/dist/css/bootstrap.css"
Adding Bootstrap 4 Using ng-bootstrap and ngx-bootstrap
Bootstrap depends on jQuery and Popper.js libraries, and if you don't include them in your project, any Bootstrap components that rely on JavaScript will not work.
Why not include those libs? For Angular it's better to avoid using libraries that make direct manipulation of the DOM (like jQuery) and let Angular handle that.
Now what if you need the complete features of Bootstrap 4 without the JS libraries?
A better way is to use component libraries created for the sake of making Bootstrap work seamlessly with Angular such as ng-bootstrap or ngx-bootstrap
npm install --save @ng-bootstrap/ng-bootstrap
Next you'll need to add the module you imported in your app root module
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [/*...*/],
imports: [/*...*/, NgbModule.forRoot()],
/*...*/
})
export class AppModule {
}
Please note that ng-bootstrap requires the Bootstrap 4 CSS file to be present.
You can add it in the styles array of the angular.json file like that:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
No comments:
Post a Comment