Creating an Angular project
We will create a new Angular project using Angular CLI. As Angular CLI has NPM package, its installation can be done using the below command:
$ npm install -g @angular/cli
After installing the above command successfully, we can create a new Angular project using below command Angular CLI command:
$ ng new mybootstrap-angular-project
Start your web server using the command below:
To install bootstrap using NPM we will move the current directory to our project and then execute the following command. Using --save with the command first downloads bootstrap and then stores into node modules folder. The --save flag will also add bootstrap as the dependency in package.json file also. The main purpose of adding dependencies in package.json file is to use any source management tool like git. We are not going to check in the node modules folder as it takes a fair amount of space on the disk. By listing all the dependencies in package.json file we can install the dependencies using npm install command.
For Bootstrap 3: npm install firstname.lastname@example.org --save (install the specific version of bootstrap) For Bootstrap 4: npm install bootstrap --save (directly installed latest version of bootstrap)
After doing the above steps, we will now import the CSS. We need to give the style path in angular.json file as follows:
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", // We will add bootstrap CSS entry here "../node_modules/@swimlane/ngx-datatable/release/index.css", "styles.scss", "../node_modules/snazzy-info-window/dist/snazzy-info-window.css", "../node_modules/ngx-toastr/toastr.css" ],
Another way of importing the bootstrap CSS is as to import the bootstrap CSS in styles.css file. Open style.css and the below code:
Now we can start adding bootstrap in our components.