Knowledge Management Banner

Knowledge Management Banner

Part 12 : Adding bootstrap in angular 2 project

In this tutorial tutorial we will see how to add bootstrap in angular 2 project.

Installation of bootstrap 3 in angular 2 project in covered in details.


Click here to download complete project

Index.html code

 <!DOCTYPE html>  
 <html>  
  <head>  
   <title>Angular QuickStart</title>  
   <base href="/">  
   <meta charset="UTF-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1">  
   <link rel="stylesheet" href="styles.css">  
   <link rel="stylesheet" href="node_modules/Bootstrap/bootstrap.min.css">  
   <link rel="stylesheet" href="node_modules/Bootstrap/bootstrap-theme.min.css">  
   <!-- Polyfill(s) for older browsers -->  
    <script src="node_modules/Jquery/jquery-3.2.1.min.js"></script>  
    <script src="node_modules/Bootstrap/bootstrap.min.js"></script>  
   <script src="node_modules/core-js/client/shim.min.js"></script>  
   <script src="node_modules/zone.js/dist/zone.js"></script>  
   <script src="node_modules/systemjs/dist/system.src.js"></script>  
   <script src="systemjs.config.js"></script>  
   <script>  
    System.import('main.js').catch(function(err){ console.error(err); });  
   </script>  
  </head>  
  <body>  
   <my-app>Loading AppComponent content here ...</my-app>  
  </body>  
 </html>  

Home Component code

 import { Component } from '@angular/core';  
 @Component({  
   selector: 'my-app',  
   template: `<h1>Hello {{name}}</h1>  
   <button class="btn btn-primary" >Bootstrap button</button>  
   `,  
 })  
 export class HomeComponent {  
   name = 'Angular';  
 }  

No comments

Powered by Blogger.