Rate

Rate component.

When To Use#

  • Show evaluation.
  • A quick rating operation on something.

Import this Component Individually#

You can get more detail here.

import { NzRateModule } from 'ng-zorro-antd/rate';

Examples

The simplest usage.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-rate-basic',
  template: `
    <nz-rate [ngModel]="0"></nz-rate>
  `
})
export class NzDemoRateBasicComponent {}
normal

Add copywriting in rate components.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-rate-text',
  template: `
    <nz-rate [(ngModel)]="value" [nzTooltips]="tooltips"></nz-rate>
    <span *ngIf="value" class="ant-rate-text">{{ value ? tooltips[value - 1] : '' }}</span>
  `
})
export class NzDemoRateTextComponent {
  tooltips = ['terrible', 'bad', 'normal', 'good', 'wonderful'];
  value = 3;
}
allowClear: true
allowClear: false

Support set allow to clear star when click again.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-rate-clear',
  template: `
    <nz-rate [(ngModel)]="value" nzAllowHalf></nz-rate>
    <span class="ant-rate-text">allowClear: true</span>
    <br />
    <nz-rate [(ngModel)]="value" nzAllowHalf [nzAllowClear]="false"></nz-rate>
    <span class="ant-rate-text">allowClear: false</span>
  `
})
export class NzDemoRateClearComponent {
  value = 0;
}

Support select half star.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-rate-half',
  template: `
    <nz-rate [ngModel]="2.5" nzAllowHalf></nz-rate>
  `
})
export class NzDemoRateHalfComponent {}

Read only, can't use mouse to interact.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-rate-disabled',
  template: `
    <nz-rate [ngModel]="2" nzDisabled></nz-rate>
  `
})
export class NzDemoRateDisabledComponent {}

  • A
    A
  • A
    A
  • A
    A
  • A
    A
  • A
    A

Replace the default star to other character like alphabet, digit, iconfont or even Chinese word.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-rate-character',
  template: `
    <nz-rate [ngModel]="0" nzAllowHalf [nzCharacter]="characterIcon"></nz-rate>
    <br />
    <nz-rate [ngModel]="0" nzAllowHalf class="large" [nzCharacter]="characterEnLetter"></nz-rate>
    <br />
    <nz-rate [ngModel]="0" nzAllowHalf [nzCharacter]="characterZhLetter"></nz-rate>
    <ng-template #characterIcon><i nz-icon nzType="heart"></i></ng-template>
    <ng-template #characterZhLetter></ng-template>
    <ng-template #characterEnLetter>A</ng-template>
  `,
  styles: [
    `
      .large ::ng-deep .ant-rate-star {
        font-size: 36px;
      }
    `
  ]
})
export class NzDemoRateCharacterComponent {}

API#

nz-rate#

PropertyDescriptiontypeDefaultGlobal Config
[nzAllowClear]whether to allow clear when click againbooleantrue
[nzAllowHalf]whether to allow semi selectionbooleanfalse
[nzAutoFocus]get focus when component mountedbooleanfalse
[nzCharacter]custom character of rateTemplateRef<void><i nz-icon nzType="star"></i>
[nzCount]star countnumber5
[nzDisabled]read only, unable to interactbooleanfalse
[nzTooltips]Customize tooltip by each characterstring[][]
[ngModel]current value , double bindingnumber-
(ngModelChange)callback when select valueEventEmitter<number>-
(nzOnBlur)callback when component lose focusEventEmitter<FocusEvent>-
(nzOnFocus)callback when component get focusEventEmitter<FocusEvent>-
(nzOnHoverChange)callback when hover itemEventEmitter<number>-
(nzOnKeyDown)callback when keydown on componentEventEmitter<KeyboardEvent>-

Methods#

NameDescription
blur()remove focus
focus()get focus