I am using NgbRating module from @ng-bootstrap/ng-bootstrap and i have seen the implementation on stackblitz and implemented as it was there. After implementing it is showing abnormality like this : 
These (*) between every star is showing that i don't want. Here's my HTML file code :
<div id="about" *ngFor="let Review of Reviews" class="p-24" fxLayout="row wrap">
<mat-card style="padding-bottom: 60px;" class="example-card">
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title></mat-card-title>
<mat-card-subtitle></mat-card-subtitle>
</mat-card-header>
<div class="rating">
Overall Rating :
<ngb-rating [rate]="Review.rating"></ngb-rating>
</div>
<mat-card-content>
<p>
</p>
</mat-card-content>
<mat-form-field class="example-full-width">
<textarea disabled matInput placeholder="Add your comment"></textarea>
</mat-form-field>
<mat-card-actions class="card-actions">
<button class="respond" mat-button>Respond</button>
</mat-card-actions>
</mat-card>
</div>
Here is my typescript file code :
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { fuseAnimations } from '@fuse/animations';
import { ReviewService } from 'app/services/review/review.service';
import { Review } from 'app/models/review/review.model';
import { NgbRatingConfig } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-review-list',
templateUrl: './review-list.component.html',
styleUrls: ['./review-list.component.scss'],
encapsulation: ViewEncapsulation.None,
animations : fuseAnimations
})
export class ReviewListComponent implements OnInit {
Reviews : Review[];
constructor(private ReviewService : ReviewService, private config : NgbRatingConfig) { }
currentRate = 3.14;
ngOnInit() {
this.config.max = 5;
this.config.readonly = true;
this.Reviews = this.ReviewService.find();
console.log(this.Reviews)
}
}
And i have also added NgbModule in my module.ts file.
from NgbRating module showing abnormality and asterisk Angular 8.1.2
No comments:
Post a Comment