Rating component not functioning as required

Question

I have a rating component that seems to be working fine except for the part where next to the star there appears brackets with an asterix. In an attempt to fix that I added bootstrap. This is how the component appears atm

Inspecting the component shows the following,

<span class="sr-only ng-star-inserted">(*)</span>

I did have a look at What is sr-only in Bootstrap 3? and tried to add css that would do the trick but no luck.

So i added BootstrapCDN to app.comonent.html, the rating component disappears completely though i can see it very very briefly on page load.

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
</head>

<body>
  <!-- <div> -->
  <router-outlet></router-outlet>
  <!-- </div> -->
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
  integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

</html>

The implementation on this on stackblitz seems pretty straightforward ng-bootstrap example but i can't figure out where i am going wrong.

I did go through the documentation for ng-bootstrap at ng-bootstrap-github where at line 101 'Alternatively put a ng-template as the only child of ngb-rating element' . On doing that i.e,

<ngb-rating [(rate)]="currentRate" (click)="setCurrentRate()" [(ngModel)]="currentRate" class="sr-only">
    <ng-template></ng-template>
</ngb-rating>

the rating component stops functioning.

Try adding bootstrap to index.html and not the component's html. — Ghonima, Mar 09 '19 at 09:30
Thank you very much for your input @Ghanima. I had added the bootstrap to index.html previously but it looks like i added the wrong one. I now added the same one as found on the example here https://stackblitz.com/angular/jdmygmrmarm?file=index.html and it's working fine now. I am looking at the difference between the two though which i will look into now. — Ayubx, Mar 12 '19 at 07:02

JB Nizet · Answer 1 · 2019-03-09T09:35:05.617

Several mistakes and misconceptions here.

ng-bootstrap does NOT need jQuery, popper.js, and bootstrap's JS. It's a replacement for all of that that provides a real Angular API
ng-bootstrap does NOT work with Bootstrap 3
You must NOT add the class sr-only to your ngb-rating: sr-only means "creen reader only". It's invisible, except for screen readers, used by blind people to "read" the page.
ng-bootstrap does need the bootstrap 4 CSS, since it relies on it for all its styling (hence the name, ng-bootstrap)

All this is explained in the getting started page of the officiel ng-bootstrap documentation.

Having <html> and <head>and <body> in your app.component.html doesn't make sense: this is the template of a component, which is inserted into the index.html page.

Thank you JB. The above is my attempt to solve the problem. Like i said the implementation of the rating component in the example is simple and straightforward and I do not yet understand why the `(*)` shows up despite your explanation. I did not add `sr-only`. I mentioned above that's what showing on inspecting the component. I will give it another go again as I had stopped my work on this. — Ayubx, Mar 09 '19 at 09:45

Rating component not functioning as required

1 Answers1