Toggle UI Design Pattern In Angular

While working on frontend, I have many time seen a pattern of toggle. This pattern is like we have checkbox in HTML.

For example we may have a gallery of images where user can select the images he wants to download and the selected images many have some border to distinguish from the unselected images, or some other changes to distinguish.

Abstraction of Functionality

If we look at the functionality we have three state of toggle

• Checked state
• Unchecked state
• Disabled state

From the above we can see that for every state should have a different view. To implement these functionality I have create an NPM package for angular developers. Name of the package is ng-generic-toggle . ng-generic-toggle works very well with reactive and template-driven form. Developer have to worry about the html part only. All the functionality we can have with other input field, we can use those in ng-generic-toggle . We can also apply custom validation, if we want, as we can any other input field.

If you want to check the code, please go to the end of this article for demo.

How to use ng-generic-toggle

Below are the steps to use ng-generic-toggle:

1. npm install — save ng-generic-toggle
2. Import ‘ng-generic-toggle` in the module of component where we want to use it.

import { NgGenericToggleModule } from 'ng-generic-toggle';

  @NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    NgGenericToggleModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],

})
export class AppModule { }

3. Add the following lines with the required modification

<ng-generic-toggle [formControl]="toggleFormControl">
  <div *gtCheckedState>Item is selected</div>
  <div *gtUnCheckedState>Item is not selected</div>
</ng-generic-toggle>

here is the stackblitz link for DEMO.