Rating icon doesn't show in my Angular project-CodePudding

I am learning Angular by following a book and i came to a task where i have to implement a rating component using bootstrap.When i compile my code, the rating component doesn't appear and I couldn't find the mistake...

rating.component.ts


@Component({
    selector: "rating",
    template:`<i
    
    [class.glyphicon-star-empty]="rating < 1"
    [class.glyphicon-star]="rating >= 1"
    (click)="onClick(1)"
    >
    </i>
    `
})

export class RatingComponent{
    rating = 0;
onClick(ratingValue:any){
this.rating = ratingValue;
}
}

app.component.ts



@Component({
  selector: 'app-root',
  template: `
  <rating></rating>`,
})
export class AppComponent {
  title = 'Angular Project';
}

index.html

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>MyApp</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ProductsComponent } from './Components/product.component';

import { AppComponent } from './app.component';
import { AdvertisementComponent } from './Components/advertisement.component';
import { MaterialComponent } from './Components/material.component';
import { RatingComponent } from './Components/rating.component';

@NgModule({
  declarations: [
    AppComponent,ProductsComponent,AdvertisementComponent,MaterialComponent,RatingComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

CodePudding user response：

You're trying to use glyphicon in Bootstrap5, it was discontinued in Bootstrap4.

If you really want to use glyphicon and if working with an older version of Bootstrap it's not a problem, you can use Bootstrap3 changing the index.html file

 <link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
 />

Your code is displaying only one star, you can show 5 stars changing the template to something like:

<span *ngFor="let number of [1, 2, 3, 4, 5]">
  <i
    
    [class.glyphicon-star-empty]="rating < number"
    [class.glyphicon-star]="rating >= number"
    (click)="onClick(number)"
  >
  </i>
</span>