How to use bootstrap control in angular 2

Achieve in Following Way

Step 1: Install jquery & bootstrap in your application

Installation comment: npm install jquery bootstrap --save

Step 2: Add following code in "webpack.common.js"

1 2 3 4 5 6 7

plugins: [ new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery', jquery: 'jquery' }) ]

Step 3: Add following code in "vendor.ts"

1 2 3

import 'jquery'; import 'bootstrap/dist/js/bootstrap'; import 'bootstrap/dist/css/bootstrap.min.css';

Step 4: Now you can add your bootstrap control in html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<h2>Bootstrap Control</h2> <h3>Label</h3> <span class="label label-default">Hi! I am your bootstrap label.</span> <h3>Input Box</h3> <label for="pwd">Name:</label> <input type="text" class="form-control" id="pwd"> <h3>Dropdown</h3> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Languages <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Tamil</a></li> <li><a href="#">English</a></li> <li><a href="#">Spanish</a></li> </ul> </div>

Step 5: That's all.

Output:

Note:

•   This implementation is applicable for latest angular 2 (version 2.2, 2.4 & 4.0)

If you like this post. kindly share your feedback