Skip to main content

angular bootstrap - Readonly & editable Rating

app.component.ts 

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

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


export class AppComponent {
  currentRate:number = 2;
  isReadOnly:boolean = false;

  onClick(){
    this.isReadOnly = !this.isReadOnly;
  }
}
app.component.html 

<h4 style="padding-top:25px; padding-bottom:25px;">
  Angular Bootstrap - Editable And Readonly Rating
</h4>

<div>Current Rate: <b>{{currentRate}}</b></div>
<br/>

<h5>
  Rating is now {{isReadOnly? 'read only' : 'editable'}}
</h5>
<br/>

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

<br/><br/>
<button (click)="onClick()" >Toggle Editable</button>
More Angular tutorials
Labels: