diff --git a/packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.css b/packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.css
index 743230875..e89394307 100644
--- a/packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.css
+++ b/packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.css
@@ -1 +1 @@
-/** No CSS for this example */
+/** No CSS for this example **/
diff --git a/packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.html b/packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.html
index a5730d4aa..2bbf94841 100644
--- a/packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.html
+++ b/packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.html
@@ -1 +1,5 @@
- Indeterminate
+
+
All fruits
+
{{fruit.name}}
+
+
diff --git a/packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.ts b/packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.ts
index 0ec92c8d1..59d53bfff 100644
--- a/packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.ts
+++ b/packages/mosaic-examples/checkbox-indeterminate/checkbox-indeterminate-example.ts
@@ -1,4 +1,10 @@
-import { Component } from '@angular/core';
+import { ChangeDetectorRef, Component } from '@angular/core';
+
+
+interface ICheckbox {
+ name: string;
+ checked: boolean;
+}
/**
@@ -9,4 +15,46 @@ import { Component } from '@angular/core';
templateUrl: 'checkbox-indeterminate-example.html',
styleUrls: ['checkbox-indeterminate-example.css']
})
-export class CheckboxIndeterminateExample {}
+export class CheckboxIndeterminateExample {
+ parentIndeterminate = true;
+ parentChecked = true;
+
+ fruits: ICheckbox[] = [
+ { name: 'Apples', checked: true },
+ { name: 'Bananas', checked: false },
+ { name: 'Grapes', checked: false }
+ ];
+
+ constructor(private ref: ChangeDetectorRef) {}
+
+ updateCheckboxes(index: number) {
+ this.toggleFruitChecked(index);
+ this.updateIndeterminate();
+ this.ref.detectChanges();
+ }
+
+ toggleFruitChecked(index: number) {
+ this.fruits[index].checked = !this.fruits[index].checked;
+ }
+
+ toggleChecked() {
+ this.parentChecked = !this.parentChecked;
+ for (const fruit of this.fruits) {
+ fruit.checked = this.parentChecked;
+ }
+ this.parentIndeterminate = false;
+ this.ref.detectChanges();
+ }
+
+ updateIndeterminate() {
+ let checked: number = 0;
+ let unchecked: number = 0;
+ const length = this.fruits.length;
+ this.fruits.forEach((fruit) => {
+ fruit.checked ? checked++ : unchecked++;
+ });
+ this.parentIndeterminate = (checked !== length && unchecked !== length);
+ this.parentChecked = this.parentIndeterminate || length === checked;
+ }
+}
+