MDBootstrap En este artículo, veremos cómo usar Switch Component en Angular MDBootstrap.
El componente de interruptor se utiliza para indicar el estado de encendido/apagado del componente. El interruptor se puede utilizar para realizar la función de encendido/apagado o proporcionar la preferencia para elegir una de las dos opciones predefinidas.
Sintaxis:
<div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input"> <label class="custom-control-label">Switch</label> </div>
Acercarse:
- Descarga Angular MDBootstrap desde el sitio oficial .
- Extraiga los archivos al directorio de trabajo actual.
- Instale npm en el proyecto actual usando el siguiente comando:
npm install
- Después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando:
cd appname
- Inicie el servidor con el siguiente comando:
ng serve
Estructura del proyecto: después de la instalación completa, tendrá el siguiente aspecto:
Ejemplo 1: este es el ejemplo básico que ilustra cómo usar el componente Switch en Angular MDBootstrap. Aquí, hemos implementado el interruptor predeterminado y marcado.
app.component.html
<div id="gfg"> <h1>GeeksforGeeks</h1> <h4> Angular MDBootstrap Switch Component </h4> <br /> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="customSwitches"> <label class="custom-control-label" for="customSwitches"> Switch </label> </div> <br/> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="gfg1" checked> <label class="custom-control-label" for="gfg1"> Switch </label> </div> </div>
app.component.ts
import { AfterViewInit, Component, ViewChildren } from "@angular/core"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"], }) export class AppComponent implements AfterViewInit { @ViewChildren(AppComponent) collapses!: AppComponent[]; ngAfterViewInit(): void {} togglevisible = false; togglebg() { this.togglevisible = !this.togglevisible; } }
app.module.ts
import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { AppComponent } from "./app.component"; import { MDBBootstrapModule } from "angular-bootstrap-md"; import { FormsModule } from "@angular/forms"; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, MDBBootstrapModule.forRoot(), FormsModule, ], providers: [], bootstrap: [AppComponent], }) export class AppModule {}
Producción:
Ejemplo 2: En este ejemplo, sabremos cómo deshabilitar el componente Switch en Angular MDBootstrap.
app.component.html
<div id="gfg"> <h1>GeeksforGeeks</h1> <h4> Angular MDBootstrap Switch Component </h4> <br /> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="gfg1" disabled> <label class="custom-control-label" for="gfg1"> Switch </label> </div> </div>
app.component.ts
import { AfterViewInit, Component, ViewChildren } from "@angular/core"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"], }) export class AppComponent implements AfterViewInit { @ViewChildren(AppComponent) collapses!: AppComponent[]; ngAfterViewInit(): void {} togglevisible = false; togglebg() { this.togglevisible = !this.togglevisible; } }
app.module.ts
import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { AppComponent } from "./app.component"; import { MDBBootstrapModule } from "angular-bootstrap-md"; import { FormsModule } from "@angular/forms"; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, MDBBootstrapModule.forRoot(), FormsModule, ], providers: [], bootstrap: [AppComponent], }) export class AppModule {}
Producción:
Referencia: https://mdbootstrap.com/docs/angular/forms/switch