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.

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 type="check"></i></ng-template>
    <ng-template #unCheckedTemplate><i nz-icon type="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#

Import this Component Individually#

You can get more detail here.

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

nz-switch#

PropertyDescriptionTypeDefault
[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