ng add igniteui-angular

For a complete introduction to the Ignite UI for Angular, read thegetting started topic.

The next step is to import theIgxCheckboxModule in theapp.module.ts file:

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

Alternatively, as of16.0.0 you can import theIgxCheckboxComponent as a standalone dependency.

// home.component.tsimport { 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 {}

Now that you have the Ignite UI for Angular Checkbox module or component imported, you can start using theigx-checkbox component.

Using the Angular Checkbox Component

To make the checkbox in the demo, add the following code inside the component template:

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

Checkbox properties

Let's enhance the code above by binding the checkbox properties to some data. Say, we have an array of task objects, each having two properties: description and done. You can bind the checkbox componentchecked property to the underlying task object done property. Analogically, you can bind thevalue property to description.Optionally, you can also bind thechange event and add some custom logic in the provided event handler method.

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

Enhance the component template by adding a checkbox for each task and then setting the corresponding property bindings:

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

Add some styles:

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

The final result would be something like that:

Label Positioning

You can position the label using the checkbox'slabelPosition property:

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

If thelabelPosition is not set, the label will be positioned after the checkbox.

Indeterminate Checkbox in Angular

In addition to the checked and unchecked states, there is a third state a checkbox can be in:indeterminate. In this state the checkbox is neither checked, nor unchecked. This is set using the checkbox'sindeterminate property:

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

We can create an app that has a list of tasks that need to be done and one master checkbox in Angular that's going to be checked only if all the tasks are completed. Let's update the previous sample. Starting with the template:

<!-- 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>

Next, we're going to indent the subtasks, so it's more visual that they are part of the same group.

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

And finally, we'll create the logic of our application:

// app.component.tspublic 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;        }    }}

After all that is done, our application should look like this:

Styling

Following the simplest approach, you can use CSS variables to customize the appearance of the checkbox:

igx-checkbox {    --tick-color: #0064d9;    --tick-color-hover: #e3f0ff;    --fill-color: transparent;    --fill-color-hover: #e3f0ff;    --label-color: #131e29;    --focus-outline-color: #0032a5;    --border-radius: 0.25rem;}igx-checkbox:hover {    --empty-fill-color: #e3f0ff;}

By changing the values of these CSS variables, you can alter the entire look of the checkbox component.

Another way to style the checkbox is by usingSass, along with ourcheckbox-theme function.

To start styling the checkbox usingSass, first import theindex file, which includes all theme functions and component mixins:

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

Then, we create a new theme that extends thecheckbox-theme and setting parameters to style the checkbox elements. By specifying the$empty-color and$fill-color, the theme automatically calculates appropriate state colors and contrast foregrounds. You can still override any other parameter with custom values as needed.

// in styles.scss$custom-checkbox-theme: checkbox-theme(    $empty-color: #ecaa53,    $fill-color: #ecaa53,    $border-radius: 5px);

Finally,include the custom theme in your application:

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

In the sample below, you can see how using the checkbox component with customized CSS variables allows you to create a design that visually resembles the checkbox used in theSAP UI5 design system.

API References

• IgxCheckboxComponent
• IgxCheckboxComponent Styles
• LabelPosition

Theming Dependencies

• IgxRipple Theme

Additional Resources

Our community is active and always welcoming to new ideas.

• Ignite UI for AngularForums
• Ignite UI for AngularGitHub