Description

An Angular switch component

NPM

Install ngx-ui-switch using npm

ngx-ui-switch

npm install ngx-ui-switch --save

UI-Components Module

Add SwitchComponent into your UIComponentsModule class. ui-components.module.ts would look like this


import {NgModule} from '@angular/core';
import { UiSwitchModule } from 'ngx-ui-switch';
import { SwitchComponent } from './extra/switch/switch.component';

@NgModule({
imports: [UiSwitchModule],
declarations: [SwitchComponent]
})
export class UIComponentsModule { }
                

Switch Markup

switch.component.html would look like this


    <ui-switch [(ngModel)]="enable"></ui-switch>
                        

Switch Component

switch.component.ts would look like this


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

    @Component({
      selector: 'app-switch',
      templateUrl: './switch.component.html',
      styleUrls: ['./switch.component.scss']
    })
    export class SwitchComponent implements OnInit {
      enable = true;
      constructor() { }
      ngOnInit(): void { }
    }