Checkbox

The Ignite UI for Angular Checkbox component is a selection control that allows users to make a binary choice for a certain condition. It behaves similarly to the native browser checkbox.

Checkbox Demo

Usage

At its core, the checkbox component allows for a choice between selected/unselected state. The default styling is done according to the selection controls specification as per the Material Design guidelines.

To get started with the Ignite UI for Angular Checkbox install Ignite UI for Angular by typing the following command:

ng add igniteui-angular

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

Then you need to import the IgxCheckboxModule in the app.module.ts file:

// app.module.ts

...
import { IgxCheckboxModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxCheckboxModule],
    ...
})
export class AppModule {}

To get a simple checkbox, add the following code inside the component template:

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

If all went well, you should see something like the following in the browser:

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 component checked property to the underlying task object done property. Analogically, you can bind the value property to description. Optionally, you can also bind the change event and add some custom logic in the provided event handler method.

// tasks.component.ts
...
public tasks = [
  { done: true, description: 'Research' },
  { done: true, description: 'Implement' },
  { done: false, description: 'Test' },
];

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

The final result would be something like that:

Styling

Using the Ignite UI for Angular Theming, we can alter the igx-checkbox appearance.

Import theme

First, in order for us to use the functions exposed by the theme engine, we need to import the index file in our style file: 

// in styles.scss
@import '~igniteui-angular/lib/core/styles/themes/index';

Define palette

We are going to use our own color palette where we can specify our two main theme colors. Additionally we are going to set several of the exposed by the igx-checkbox-theme parameters namely $border-radius, $label-color and $empty-color. First define a custom palette:

// in styles.scss
$my-primary-color: #f5e492;
$my-secondary-color: #09f;

$my-color-palette: igx-palette(
    $primary: $my-primary-color,
    $secondary: $my-secondary-color
);

In order to see our custom palette applied, we need to pass it to a theme function. So in one bold move we will create a custom theme and pass our three more specific parameters as well. Let's say we have decided modifying these will be more than sufficient to make our component look the way we like:

// in styles.scss
$custom-checkbox-theme: igx-checkbox-theme(
    $palette: $my-color-palette,
    $border-radius: 10px,
    $label-color: $my-secondary-color,
    $empty-color: $my-secondary-color
);

Applying

All that's left is to properly scope our newly created theme.

Globally

In case you want this newly created igx-checkbox theme to be applied globally in your app, all that is needed is to include the theme in your app root style file:

// in styles.scss
// Pass our checkbox theme to the `igx-checkbox` mixin
    @include igx-checkbox($custom-checkbox-theme);
Scoped

There may be a case where you want a particular igx-checkbox be styled differently than the others in the app. This will require to use Angular specific pseudo-class selectors like :host, ::ng-deep, etc. Additionally, all of the above styles we specify in styles.scss need to be defined in the component.scss file instead.

Note

If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep. On the other side, in order to prevent our custom theme to leak to other components, be sure to include the :host selector before ::ng-deep:

// in component.scss
:host {
    ::ng-deep {
        // Pass our checkbox theme to the `igx-checkbox` mixin
        @include igx-checkbox($custom-checkbox-theme);
    }
}

Styling Demo

API References

Additional Resources

Our community is active and always welcoming to new ideas.