I am using ngrx/store to handle application state, so I have an AllLightsPage that displays a list of Light bulbs that it gets from the store.
// In all-lights.page.ts
ngOnInit() {
this.lights = this.store.let(getAllLights());
}
// In all-lights.page.html
<ion-list no-lines>
<ion-item *ngFor="let lightItem of lights | async">
<light-card
[header]="lightItem.name"
[light]="lightItem"
(toggleLight)="toggleLight($event)"
(updateBrightness)="updateBrightness($event)"
(updateColour)="updateColour($event)"
>
</light-card>
</ion-item>
And then I have a LightCard component that displays all the information for each light.
// In light-card.component.html
<ion-card-content>
<ion-row>
<ion-col width-20>
<button [clear]="!light.isOn" (click)="toggleLight.emit({ light: light, value: $event.value })">
<ion-icon name="bulb"></ion-icon>
</button>
</ion-col>
<ion-col>
<ion-item>
<ion-range [(ngModel)]="light.brightness" min="0" max="254" (ionChange)="updateBrightness.emit({ light: light, value: $event.value })">
<ion-icon range-left small name="sunny"></ion-icon>
<ion-icon range-right name="sunny"></ion-icon>
</ion-range>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<input type="color" [value]="light.hexColour" (change)="updateColour.emit({ light: light, value: $event.target.value })">
</ion-col>
</ion-row>
</ion-card-content>
So my light-card component has one main input, the light object, which sets the card’s name, hexColour, brightness, and whether the light is on or off. When I use ChangeDetectionStrategy.OnPush
, all the values in the template correctly reflect the light object’s current state EXCEPT the ion-range that is used to represent the light’s brightness. Even manually selecting a value by moving the ion-range’s knobs has no effect, it always goes back to 0.
I am guessing that this is something to do with the two-way data binding using [(ngModel)]
. But I can’t find any other way to set the ion-range’s value. Its value does not appear to be an input, so I can’t just go <ion-range [value]="light.brightness" ...>
to avoid using two-way data binding.
Is this a bug with ion-range? How can I get its state to update correctly using ChangeDetectionStrategy.OnPush
? How can I set the range’s value without using two-way data binding?