CODEWITHSUNDEEP
angulartwitter-bootstrap
user1232138
user1232138

Reputation: 5541

No glyphicon output in Angular with bootstrap

I'm trying to output a glyphicon-star. I have installed bootstrap and I created a component called favorite using angular cli. This is the content of my favorite.component.html

<span class="glyphicon glyphicon-star"></span>

Following is the content of my favorite.component.ts


@Component({
  selector: 'favorite',
  templateUrl: './favorite.component.html',
  styleUrls: ['./favorite.component.css']
})
export class FavoriteComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

and following is the content of my app.component.html

<favorite></favorite>

Sometimes I get [WDS] Disconnected! error. But I'm not getting the desired output. I've tried executing npm update

P.S : When I try to display a primary button, it works fine.

Upvotes: 2

Views: 2223

Answers (3)

user1232138
user1232138

Reputation: 5541

The code doesn't work with bootstrap 4 but works fine with bootstrap 3.3.7.

Upvotes: -1

Tawfiek Khalaf
Tawfiek Khalaf

Reputation: 507

You have to add bootstrap styles minfied file into styles array in angular.json

{ ... "projects": { "contactsapp": { ... "architect": { "build": { ... "styles": [ "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.min.css" ...

Upvotes: 1

paulsm4
paulsm4

Reputation: 121881

  1. You need to install Bootstrap and jQuery

    EXAMPLE:

    cd myProject
npm install --save bootstrap jquery

  2. Update angular.json:

    EXAMPLE:

    {
  ...
  "projects": {
  "contactsapp": {
    ...
    "architect": {
        "build": {
         ...
        "styles": [
           "src/styles.css",
           "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ...
        "scripts": [
           "node_modules/jquery/dist/jquery.min.js",
           "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

  3. Use Bootstrap in your templates

    EXAMPLE: favorite.component.html

    <span class="glyphicon glyphicon-star"></span>

If you're still having problems/questions, I found this tutorial helpful:

Styling An Angular Application With Bootstrap, Ahmed Bouchefra

Upvotes: 0

Related Questions