bootstrap class not applied in angular 2 component

Question

This is my first angular 2 app and don't know why the bootstrap classes is not applied or glyphicons are missing? Can somebody explain how to use bootstrap classes in angular 2?

This is my app.component.ts

import {Component} from 'angular2/core';
import {LikeComponent} from './like.component'

@Component({
    selector: 'my-app',
    template: `
                <like [totalLikes]="tweet.totalLikes" [iLike]="tweet.iLike"></like>
               `,
    directives: [LikeComponent] 
})
export class AppComponent {
    tweet = {
        totalLikes: 10,
        iLike: false
    }
 }

And like.component.ts:

import {Component, Input} from 'angular2/core';

@Component({
    selector: 'like',
    template: `
    <i
       class="glyphicon glyphicon-heart" 
       [class.highlighted]="iLike"
       (click)="onClick()">
    </i>
    <span>{{ totalLikes }}</span>
    `,
    styles: [`
        .glyphicon-heart {
            color: #ccc;
            cursor: pointer;
        }
        
        .highlighted {
            color: deeppink;
        }   
    `]
})
export class LikeComponent {
    @Input() totalLikes = 0;
    @Input() iLike = false;
    
    onClick(){
        this.iLike = !this.iLike;
        this.totalLikes += this.iLike ? 1 : -1;
    }
}

Answer 1

Actually the Problem is you havn't Import Bootstrap.css file in the main file i.e index.html file, try using this core bootstrap file in index.html you code would run,

import this file in index.html:-

<link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />

Here is working exmaple of your code Working Plunker

Answer 2

Note, they dropped Glyphicons intergration in bootstrap 4.0; so while the accepted answer probably stands, it will not help if you're using bootstrap 4.0, which is now current for Angular 2.