Descripción general del componente de casilla de verificación Angular

    Angular Checkbox es una extensión de la casilla de verificación de tipo de entrada HTML estándar, que proporciona una funcionalidad similar, solo que mejorada con elementos como animaciones y estilo de Material Design. Permite a los usuarios elegir una o varias opciones predefinidas, principalmente en formularios y encuestas.

    El componente Ignite UI for Angular Checkbox es un control de selección que permite a los usuarios realizar una elección binaria para una determinada condición. Se comporta de manera similar a la casilla de verificación del navegador nativo. Algunas de las características que ofrece son opciones de estilo, temas, estados marcados, no marcados e indeterminados, entre otras.

    Angular Checkbox Example

    Vea la casilla de verificación en acción en el siguiente ejemplo de casilla de verificación Angular a continuación.

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

    Getting Started with Ignite UI for Angular Checkbox

    Para comenzar con el componente Ignite UI for Angular Checkbox, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

    ng add igniteui-angular
    cmd

    Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.

    El siguiente paso es importar IgxCheckboxModule en el archivo app.module.ts:

    // app.module.ts
    
    import { IgxCheckboxModule } from 'igniteui-angular';
    // import { IgxCheckboxModule } from '@infragistics/igniteui-angular'; for licensed package
    
    @NgModule({
        ...
        imports: [..., IgxCheckboxModule],
        ...
    })
    export class AppModule {}
    typescript

    Alternativamente, a partir de 16.0.0 puede importar IgxCheckboxComponent como una dependencia independiente.

    // home.component.ts
    
    import { IgxCheckboxComponent } from 'igniteui-angular';
    // import { IgxCheckboxComponent } from '@infragistics/igniteui-angular'; for licensed package
    
    @Component({
        selector: 'app-home',
        template: `
        <igx-checkbox [checked]="true">
            Simple checkbox
        </igx-checkbox>
        `,
        styleUrls: ['home.component.scss'],
        standalone: true,
        imports: [IgxCheckboxComponent]
    })
    export class HomeComponent {}
    typescript

    Ahora que ha importado el módulo o componente Ignite UI for Angular Checkbox, puede comenzar a usar el componente igx-checkbox.

    Using the Angular Checkbox Component

    Para marcar la casilla en la demostración, agregue el siguiente código dentro de la plantilla del componente:

    <igx-checkbox [checked]="true">
        Simple checkbox
    </igx-checkbox>
    html

    Checkbox properties

    Mejoremos el código anterior vinculando las propiedades de la casilla de verificación a algunos datos. Digamos que tenemos una serie de objetos de tarea, cada uno con dos propiedades: descripción y listo. Puede vincular la propiedad marcada del componente de casilla checked a la propiedad realizada del objeto de tarea subyacente. De manera análoga, puede vincular la propiedad value a la descripción. Opcionalmente, también puede vincular el evento change y agregar alguna lógica personalizada en el método del controlador de eventos proporcionado.

    // tasks.component.ts
    @Component({...})
    export class HomeComponent {
        public tasks = [
            { done: true, description: 'Research' },
            { done: true, description: 'Implement' },
            { done: false, description: 'Test' }
        ];
    
        public statusChanged() {
            // event handler logic
        }
    }
    typescript

    Mejore la plantilla del componente agregando una casilla de verificación para cada tarea y luego configurando los enlaces de propiedad correspondientes:

    <!--tasks.component.html-->
    <igx-checkbox *ngFor="let task of tasks" [checked]="task.done">
        {{ task.description }}
    </igx-checkbox>
    html

    Añade algunos estilos:

    //task.component.scss
    :host {
        display: flex;
        flex-flow: column nowrap;
        padding: 16px;
    }
    igx-checkbox {
        margin-top: 16px;
    }
    scss

    El resultado final sería algo así:

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Label Positioning

    Puede colocar la etiqueta usando la propiedad labelPosition de la casilla de verificación:

    <igx-checkbox labelPosition="before"></igx-checkbox>
    html

    Si no se establece labelPosition, la etiqueta se colocará después de la casilla de verificación.

    Indeterminate Checkbox in Angular

    Además de los estados marcado y no marcado, hay un tercer estado en el que puede estar una casilla de verificación: indeterminado. En este estado, la casilla de verificación no está marcada ni desmarcada. Esto se establece usando la propiedad indeterminate de la casilla de verificación:

    <igx-checkbox [indeterminate]="true"></igx-checkbox>
    html

    Podemos crear una aplicación que tenga una lista de tareas que deben realizarse y una casilla de verificación maestra en Angular que se marcará solo si se completan todas las tareas. Actualicemos el ejemplo anterior. Comenzando con la plantilla:

    <!-- app.component.html -->
    <igx-checkbox
        [readonly]="true"
        [(ngModel)]="masterCheckbox.checked"
        [(indeterminate)]="masterCheckbox.indeterminate"
        (click)="toggleAll()"
    >
    All done
    </igx-checkbox>
    <igx-checkbox class="tasks" *ngFor="let task of tasks" [(ngModel)]="task.done">
        {{ task.description }}
    </igx-checkbox>
    html

    A continuación, vamos a sangrar las subtareas, para que sea más visual que forman parte del mismo grupo.

    // app.component.scss
    :host {
        display: flex;
        flex-flow: column nowrap;
        padding: 16px;
    }
    igx-checkbox {
        margin-top: 16px;
    }
    igx-checkbox.tasks {
        padding-left: 10px;
    }
    scss

    Y finalmente, crearemos la lógica de nuestra aplicación:

    // app.component.ts
    public tasks = [
        { done: true, description: 'Research' },
        { done: true, description: 'Implement' },
        { done: false, description: 'Test' }
    ];
    public get masterCheckbox() {
        return this.tasks.reduce(
            (acc, curr, idx, arr) => {
                acc.checked = acc.checked && curr.done;
                acc.done = curr.done ? acc.done + 1 : acc.done;
                acc.indeterminate = acc.done === arr.length ? false : !!acc.done;
                return acc;
            },
            {
                checked: true,
                done: 0,
                indeterminate: false
            }
        );
    }
    public toggleAll() {
        if (this.masterCheckbox.checked) {
            for (const task of this.tasks) {
                task.done = false;
            }
        } else {
            for (const task of this.tasks) {
                task.done = true;
            }
        }
    }
    ts

    Una vez hecho todo esto, nuestra aplicación debería verse así:

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Estilismo

    Para comenzar a diseñar la casilla de verificación, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:

    @use "igniteui-angular/theming" as *;
    
    // IMPORTANT: Prior to Ignite UI for Angular version 13 use:
    // @import '~igniteui-angular/lib/core/styles/themes/index';
    scss

    Luego, creamos un nuevo tema que extiende el checkbox-theme y usamos algunos de sus parámetros para diseñar los elementos de la casilla de verificación:

    // in styles.scss
    $custom-checkbox-theme: checkbox-theme(
      $border-radius: 10px,
      $label-color: #011627,
      $empty-color: #ECAA53,
      $fill-color: #ECAA53,
      $tick-color: #011627,
    );
    scss

    El último paso es incluir el tema del componente en nuestra aplicación.

    @include css-vars($custom-checkbox-theme);
    scss

    Demo

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    App Builder | CTA Banner

    API References

    Theming Dependencies

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.