Wednesday 15 January 2020

NgbRating module showing abnormality and asterisk Angular 8.1.2

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 : enter image description here

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