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>

add the `rating.component.html` code – Andrei Tătar Feb 11 '19 at 06:32 — Andrei Tătar, Feb 11 '19 at 06:32
Please provide code in rating.component.html – Sreemat Feb 11 '19 at 06:33 — Sreemat, Feb 11 '19 at 06:33

Andrei Tătar · Answer 1 · 2019-02-11T11:01:10.000

2

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/

edited Feb 11 '19 at 11:01

answered Feb 11 '19 at 06:46

Andrei Tătar

6,077
14
32

So the documentation https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/rating/rating.ts shows how the `(*)` is rendered. There’s also an option to override the template where I just have to a ‘ put as the only child of element ..’ I changed `rating.component.html` to ``. But the component is unresponsive now. – Ayubx Feb 11 '19 at 09:59
@Ayubx So you want to use `ng-bootstrap` without the boostrap css? – Andrei Tătar Feb 11 '19 at 10:01
I want to get it to work. I am not sure what to put in the css. – Ayubx Feb 11 '19 at 10:21
I will go through it thanks but my line of thought of was to add css to the `rating.component.css' – Ayubx Feb 11 '19 at 12:31
it depends how much of bootstrap you use or not... you can also import (or redefine) only what you need in that component. (the sr-only class).. or simply hide all sr-only `:host{ ::ng-deep{ .sr-only{display:none;}}}` – Andrei Tătar Feb 11 '19 at 12:38
Yes for the moment I have all I need from bootstrap. So yes something like the css snippet you posted that just removes the `(*)`. I tried that and didn’t work. Btw if you take a look at the code for the Basic demo example at https://ng-bootstrap.github.io/#/components/rating/examples it’s pretty straight forward i.e no css or additional bootstrap code. – Ayubx Feb 11 '19 at 13:06

ng-bootstrap rating showing unwanted brackets

1 Answers1