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;
    }
}

Pardeep Jain · Accepted Answer · 2016-05-20 06:09:24Z

2

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

answered May 20, 2016 at 6:09

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maksim Gumerov · Accepted Answer · 2017-03-24 05:32:38Z

1

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.

answered Mar 24, 2017 at 5:32

Maksim Gumerov

6729 silver badges24 bronze badges

Collectives™ on Stack Overflow

bootstrap class not applied in angular 2 component

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related