Tutorial combines Angular 4 with bootstrap v.3.3.7. Bootstrap is an essential role in creating mobile applications. In addition to being easy to use, Bootstrap is also compatible with a variety of frameworks including the javascript framework. In Angular 4, how to integrate Bootstrap into the Angular project is slightly different. Follow the following tutorial.
Read another article: Simple Login Form Angular 4 Tutorial For Beginner
I am sure you have understood what is angular 4 and what is the bootstrap framework. Without further explanation, I will immediately create a simple project to combine the two frameworks.
Table of Contents
How to integrate angular 4 project with Bootstrap framework
1. Create a new Angular project using angular-cli.
Angular-CLI is a generator for Angular 2 and 4 projects (and above). By using this Angular-CLI help, we no longer need to setup many basic needs such as folder composition, how to run, how to build and others
Make sure you have installed angular-cli (read: how to install angular-cli) and run the following code
1 | ng new angularbootstrap |
2. Install Bootstrap v.3.3.7 and Jquery using npm
1 | npm install bootstrap@3 jquery --save |
3. Integrate Bootstrap and Jquery into the Angular project.
Open the .angular-cli.json file and add the following code in the styles and scripts section
1 2 | "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" |
and add the following code in the scripts section
1 2 | "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" |
So it will look like the following picture
Up to this point, the Bootstrap and Jquery installations into the Angular 4 project have been completed. Here I will try to add a starter template to test whether the Bootstrap framework above has been running correctly.
Edit index.html in the src folder and add the following script above the element
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> |
Then change the html code in app.component.html and copy the following code
1 2 3 4 5 6 7 8 | <div class="container"> <div class="starter-template"> <h1>Bootstrap starter template</h1> <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> </div><!-- /.container --> |
Please test your Angular project if Bootstrap is running well with the command ng serve to run the angular server.
Please check the result via browser
localhost:4200
If successful then the result will be like the following gif
Read: Tutorial Create Angular 4 Currency Format Directive For Textbox
So my short tutorial on How To Integrate Angular 4 + Bootstrap 3 For Beginners
