How to get started easily with Syncfusion Angular 11 Switch?

 A quick start project that helps you to create an Angular 11 Switch with a minimal code configurations.

The following section explains you how to create a simple angular 11 Switch component.

Prerequisites

Before start, we need following items to create Angular Switch in Angular 11 application.

• Node.js (Latest version)
• Angular 11
• Angular CLI
• Typescript 4+
• Visual Studio Code for Editor

Dependencies

The angular 11 Switch is created from the Syncfusion ej2-angular-buttons package from npmjs, which are distributed in npm as @syncfusion scoped packages.

Creating Angular Project

1. Install Angular cli 11 using following command.

npm install @angular/cli@11.2.3

2. Create a new Angular 11 project using Angular cli and navigate to that folder.

ng new angular11-app

cd angular11-app

Adding Angular Switch

1. After running the Angular 11 application successfully, configure the Angular Switch in this application. Install Angular Switch and EJ2 package using following command. 

npm install @syncfusion/ej2-angular-buttons –save

The --save command will instruct the NPM to include a Switch package inside the dependencies section of the package.json.

2. Import SwitchModule from installed package.
3. Import and inject the other required modules within the providers section of app.module.ts.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { SwitchModule } from '@syncfusion/ej2-angular-buttons';

import { AppComponent } from './app.component';

import { enableRipple } from '@syncfusion/ej2-base';

 

enableRipple(true);

 

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    SwitchModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule {}

4. Add the given below angular Switch’s styles in styles.css.

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";

@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";

5. Add the angular Switch component in app.component.ts.

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

 

@Component({

    selector: 'app-root',

    template: `<ejs-switch [checked]='true'></ejs-switch>` 

})

export class AppComponent {}

6. Now serve the application using following command.

ng serve --open

Once the files are compiled successfully, it will serve the site at localhost:4200

Screenshot