Issue
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"
[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/bootstrap@5.2.0/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 { }
Solution
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/bootstrap@3.4.1/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"
[class.glyphicon-star-empty]="rating < number"
[class.glyphicon-star]="rating >= number"
(click)="onClick(number)"
>
</i>
</span>
Answered By - RenanSchwyz
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.