Componente de casilla de verificación de formularios MDBootstrap angulares

MDBootstrap es una biblioteca de interfaz de usuario angular basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. En este artículo, sabremos cómo usar el componente Checkbox en Angular MDBootstrap.

Un componente de casilla de verificación le permite a un usuario elegir definitivamente un valor de un número limitado de opciones de una manera sutil.

Sintaxis:

<mdb-checkbox >CheckBox 1</mdb-checkbox>

Acercarse:

  • Descarga Angular MDBootstrap desde el sitio oficial .
  • Extraiga los archivos y cámbielos al directorio de trabajo.
  • 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:

Estructura del proyecto

Ejemplo 1: este es el ejemplo básico que ilustra cómo usar el componente Checkbox en Angular MDBootstrap.

app.component.html

<div id='gfg'>
    <h1>GeeksforGeeks</h1>
    <h4>Angular MDBootstrap Checkbox Component</h4>
    <br />
    <mdb-checkbox [default]="true">
      CheckBox 1
      </mdb-checkbox>
    <mdb-checkbox [default]="true">
      CheckBox 2
      </mdb-checkbox>
    <mdb-checkbox [default]="true">
      CheckBox 3
      </mdb-checkbox>
</div>

app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

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 usar la propiedad de estado marcada en el componente Checkbox.

app.component.html

<div id='gfg'>
    <h1>GeeksforGeeks</h1>
    <h4>Angular MDBootstrap Checkbox Component</h4>
    <br />
    <mdb-checkbox [checked]="true">
          CheckBox 1
     </mdb-checkbox>
    <mdb-checkbox [checked]="true">
          CheckBox 2
     </mdb-checkbox>
    <mdb-checkbox [checked]="true">
          CheckBox 3
     </mdb-checkbox>
</div>

app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

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 3: en este ejemplo, sabremos cómo usar la propiedad de estado indeterminado en el componente Checkbox.

app.component.html

<div id='gfg'>
    <h1>GeeksforGeeks</h1>
    <h4>Angular MDBootstrap Checkbox Component</h4>
    <br />
    <mdb-checkbox [indeterminate]="true"  
                  [default]="true">
          CheckBox 1
     </mdb-checkbox>
    <mdb-checkbox [indeterminate]="true"  
                  [default]="true">
          CheckBox 2
     </mdb-checkbox>
    <mdb-checkbox [indeterminate]="true"  
                  [default]="true">
          CheckBox 3
     </mdb-checkbox>
</div>

app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

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 4: en este ejemplo, sabremos cómo usar la propiedad de estado deshabilitado en el componente Checkbox.

app.component.html

<div id='gfg'>
    <h1>GeeksforGeeks</h1>
    <h4>Angular MDBootstrap Checkbox Component</h4>
    <br />
    <mdb-checkbox [disabled]="true"
                  [indeterminate]="true" 
                  [default]="true">
          CheckBox 1
      </mdb-checkbox>
    <mdb-checkbox [disabled]="true"
                  [default]="true">
          CheckBox 2
     </mdb-checkbox>
    <mdb-checkbox [disabled]="true" 
                  [checked]="true" 
                  [default]="true">
          CheckBox 3
      </mdb-checkbox>
</div>

app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

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 5: en este ejemplo, sabremos cómo usar la propiedad en línea en el componente Checkbox.

app.component.html

<div id='gfg'>
    <h1>GeeksforGeeks</h1>
    <h4>Angular MDBootstrap Checkbox Component</h4>
    <br />
    <mdb-checkbox [inline]="true" 
                  [indeterminate]="true"  
                  [default]="true">
          CheckBox 1
      </mdb-checkbox>
    <mdb-checkbox [inline]="true"
                  [default]="true">
          CheckBox 2
      </mdb-checkbox>
    <mdb-checkbox [inline]="true" 
                  [checked]="true" 
                  [default]="true">
          CheckBox 3
      </mdb-checkbox>
</div>

app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

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/checkbox/

Publicación traducida automáticamente

Artículo escrito por taran910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *