ng-bootstrap rating showing unwanted brackets

Question

I am trying to implement a Rating system for book reading. I have the rating component working on the form but I see (*) adjacent to the stars. Not sure where they came from.

So when I hover both the star and the asterisk in the brackets are marked simultaneously. I am trying to implement the example from ng-bootstrap.github

Here's part of the code for list.component.html

    <ng-container matColumnDef="rating">
        <th mat-header-cell *matHeaderCellDef>Rating</th>
        <td mat-cell *matCellDef="let element">
          <app-rating></app-rating>
        </td>
      </ng-container>

Here's the code for rating.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-rating',
  templateUrl: './rating.component.html',
  styleUrls: ['./rating.component.css']
})
export class RatingComponent {

  currentRate = 1;
}

I am using ng-bootstrap 4.0.2 and angular-material 7.3.0.

Edit: Adding code for rating.component.html

<ngb-rating [(rate)]="currentRate"></ngb-rating>

Answer 1

You also need to include the bootstrap CSS files. The (*) adjacent to the stars have the sr-only class which means they should be hidden if the correct CSS is loaded.

What is sr-only in Bootstrap 3?

According to bootstrap's documentation, the class is used to hide information intended only for screen readers from the layout of the rendered page.

Make sure you installed bootstrap npm install bootstrap --save-dev and edit your styles.scss file to import the boostrap styles:

@import "~bootstrap/dist/css/bootstrap.css";

or import only the things that you need

@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";

https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/