Angular Toggle Switch

About this module

An Angular toggle with `[(ngModel)]`-style two-way binding via `@Input`/`@Output`, plus a label.

Installation

1. 1

   Install Angular

   Create or open an Angular project (Angular 16+ for standalone components).

   npx @angular/cli@latest new my-app --standalone

2. 2

   Create the component files

   Create ToggleSwitchComponent.component.ts, .html and .scss and paste the matching sources below.

3. 3

   Declare it

   Import the component into your standalone component or NgModule.

   import { ToggleSwitchComponentComponent } from "./toggle-switch-component/ToggleSwitchComponent.component";
   
   @Component({
     imports: [ToggleSwitchComponentComponent],
     // ...
   })

4. 4

   Use it

   Render the component in a template.

   <app-toggle-switch-component></app-toggle-switch-component>

Usage

1. 1

   Import

   Import ToggleSwitchComponentComponent where needed.

   import { ToggleSwitchComponentComponent } from "./toggle-switch-component.component";

2. 2

   Render

   Add the selector to your template.

   <app-toggle-switch-component></app-toggle-switch-component>