Switch

Switching Selector.

When To Use#

  • If you need to represent the switching between two states or on-off state.
  • The difference between Switch and Checkbox is that Switch will trigger a state change directly when you toggle it, while Checkbox is generally used for state marking, which should work in conjunction with submit operation.

Import this Component Individually#

You can get more detail here.

import { NzSwitchModule } from 'ng-zorro-antd/switch';

Examples

The most basic usage.

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

@Component({
  selector: 'nz-demo-switch-basic',
  template: `
    <nz-switch [(ngModel)]="switchValue"></nz-switch>
  `
})
export class NzDemoSwitchBasicComponent {
  switchValue = false;
}


With text and icon.

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

@Component({
  selector: 'nz-demo-switch-text',
  template: `
    <nz-switch [ngModel]="true" nzCheckedChildren="" nzUnCheckedChildren=""></nz-switch>
    <br />
    <nz-switch [ngModel]="false" nzCheckedChildren="1" nzUnCheckedChildren="0"></nz-switch>
    <br />
    <nz-switch
      [ngModel]="true"
      [nzCheckedChildren]="checkedTemplate"
      [nzUnCheckedChildren]="unCheckedTemplate"
    ></nz-switch>
    <ng-template #checkedTemplate><i nz-icon nzType="check"></i></ng-template>
    <ng-template #unCheckedTemplate><i nz-icon nzType="close"></i></ng-template>
  `,
  styles: [
    `
      nz-switch {
        margin-bottom: 8px;
      }
    `
  ]
})
export class NzDemoSwitchTextComponent {}

Mark a pending state of switch.

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

@Component({
  selector: 'nz-demo-switch-loading',
  template: `
    <nz-switch [ngModel]="true" nzLoading></nz-switch>
    <br />
    <nz-switch nzSize="small" [ngModel]="false" nzLoading></nz-switch>
  `,
  styles: [
    `
      nz-switch {
        margin-bottom: 8px;
      }
    `
  ]
})
export class NzDemoSwitchLoadingComponent {}

Disabled state of Switch.

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

@Component({
  selector: 'nz-demo-switch-disabled',
  template: `
    <nz-switch [(ngModel)]="switchValue" [nzDisabled]="isDisabled"></nz-switch>
    <br />
    <button nz-button [nzType]="'primary'" (click)="isDisabled = !isDisabled">Toggle disabled</button>
  `,
  styles: [
    `
      nz-switch {
        margin-bottom: 8px;
      }
    `
  ]
})
export class NzDemoSwitchDisabledComponent {
  switchValue = false;
  isDisabled = true;
}

nzSize="small" represents a small sized switch.

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

@Component({
  selector: 'nz-demo-switch-size',
  template: `
    <nz-switch [ngModel]="true"></nz-switch>
    <br />
    <nz-switch nzSize="small" [ngModel]="true"></nz-switch>
  `,
  styles: [
    `
      nz-switch {
        margin-bottom: 8px;
      }
    `
  ]
})
export class NzDemoSwitchSizeComponent {}

The status of Switch is completely up to the user and no longer automatically changes the data based on the click event.

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

@Component({
  selector: 'nz-demo-switch-control',
  template: `
    <nz-switch [(ngModel)]="switchValue" [nzControl]="true" (click)="clickSwitch()" [nzLoading]="loading"></nz-switch>
  `
})
export class NzDemoSwitchControlComponent {
  switchValue = false;
  loading = false;

  clickSwitch(): void {
    if (!this.loading) {
      this.loading = true;
      setTimeout(() => {
        this.switchValue = !this.switchValue;
        this.loading = false;
      }, 3000);
    }
  }
}

API#

nz-switch#

PropertyDescriptionTypeDefaultGlobal Config
[ngModel]determine whether the nz-switch is checked, double bindingbooleanfalse
[nzCheckedChildren]content to be shown when the state is checkedstring | TemplateRef<void>-
[nzUnCheckedChildren]content to be shown when the state is uncheckedstring | TemplateRef<void>-
[nzDisabled]Disable switchbooleanfalse
[nzSize]the size of the nz-switch, options: defaultsmall'small' | 'default''default'
[nzLoading]loading state of switchbooleanfalse
[nzControl]determine whether fully control state by userbooleanfalse
(ngModelChange)a callback function, can be executed when the checked state is changingEventEmitter<boolean>-

Methods#

NameDescription
focus()get focus
blur()remove focus