CODEWITHSUNDEEP
angularangular-materialng-bootstrapangular-material-6
Ayubx
Ayubx

Reputation: 665

ng-bootstrap rating showing unwanted brackets

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.

enter image description here

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>

Upvotes: 3

Views: 1822

Answers (1)

Andrei Tătar
Andrei Tătar

Reputation: 8295

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/

Upvotes: 2

Related Questions