Switch

import { Component } from '@angular/core';
 
import { ZardSwitchComponent } from '../switch.component';
 
@Component({
  selector: 'zard-demo-switch',
  imports: [ZardSwitchComponent],
  standalone: true,
  template: `
    <z-switch />
  `,
})
export class ZardDemoSwitchDefaultComponent {}
 

import { Component } from '@angular/core';
 
import { ZardSwitchComponent } from '../switch.component';
 
@Component({
  selector: 'z-demo-switch-destructive',
  imports: [ZardSwitchComponent],
  standalone: true,
  template: `
    <z-switch zType="destructive" />
  `,
})
export class ZardDemoSwitchDestructiveComponent {}
 

import { Component } from '@angular/core';
 
import { ZardSwitchComponent } from '../switch.component';
 
@Component({
  selector: 'z-demo-switch-size',
  imports: [ZardSwitchComponent],
  standalone: true,
  template: `
    <z-switch zSize="sm">Small</z-switch>
    <z-switch>Default</z-switch>
    <z-switch zSize="lg">Large</z-switch>
  `,
})
export class ZardDemoSwitchSizeComponent {}
 

import { Component } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 
import { ZardSwitchComponent } from '../switch.component';
 
@Component({
  selector: 'z-demo-switch-disabled',
  imports: [ZardSwitchComponent, FormsModule, ReactiveFormsModule],
  standalone: true,
  template: `
    <z-switch [(ngModel)]="model" disabled>Disabled</z-switch>
    <z-switch [formControl]="checkControl">Disabled in forms</z-switch>
  `,
})
export class ZardDemoSwitchDisabledComponent {
  model = false;
  checkControl = new FormControl({ value: true, disabled: true });
}