Angular 4 : Using Bootstrap With Registration Component
This blog will help you learn how to integrate bootstrap in your Angular.JS projects and apps.
Follow the steps listed below in order to integrate Bootstrap in Angular.JS –
1. For using Bootstrap in our Angular.JS app, we have to use our registration form app which we have created using custom component.
2. Our first step will be to inherit Bootstrap in our angular.js project. So, to integrate, write down the following code line in the terminal tab of your editor –
npm install bootstrap --save
This code line means install bootstrap through node package manager and save it.
3. As soon as you hit ENTER key, the package of bootstrap is automatically loaded in the library. You can find the required package by following the path –
Explorer tab (left sidebar of the editor) → myproject → myapp → node_modules → bootstrap
In this bootstrap folder, you will find a CSS file that we will be including in our project. In order to access it, follow the path –
Explorer tab (left sidebar of the editor) → myproject → myapp → node_modules → bootstrap → dist → css → bootstrap.min.css
4. Again in the editor’s Explorer tab, you will notice a file by the name .angular-cli.json. Open it and update the styles section with following code –
. . “index” : “index.html”, “main” : “main.ts”, “polyfills” : “polyfills.ts”, “test” : “test.ts”, “tsconfig” : “tsconfig.app.json”, “testTsconfig” : “tesconfig.spec.json”, “prefix” : “app”, “styles” : [ “../node_modules/bootstrap/dist/css/bootstrap.min.css”, “styles.css” ], . .
Since we have included bootstrap in our project, we also have to inherit its corresponding CSS file as well (code line 9).
5. After saving the changes made in .angular-cli.json file, connect to the local server by typing the following code line in the terminal tab –
6. After refreshing your app’s frontend web page (localhost:4200) you can notice the addition of Bootstrap in your project through right click → inspect element → <head> → <style type=”text/css”>…</style>
As soon as you click on this style tag you can notice bootstrap added in your project.
7. Go to myproject → myapp → src → app → registration and open up the file registration.component.html. Add the bootstrap class in button (code line 9) by updating it with following code –
<div id=”registration”> <form> <label>Full Name</label> <input type =”text” name=”fullname” /><br> <label>Email</label> <input type =”text” name=”demail” /><br> <label>Password</label> <input type =”password” name=”dpassword” /><br> <button class=”btn btn-primary”>Registration</button> </form> </div>
8. After saving the changes made in the file, you can see a different visualization of registration button as Bootstrap is finally integrated into your angular.js project.
The blog describes you the best and simplest way to implement Bootstrap in your Angular.JS projects.
Visit following blogs in order to learn how to –