How to change text colour in Aurelia Dialog? - aurelia

Question

I have a dialog as you can see here:
<template>
<ux-dialog>
<ux-dialog-body>
<h2 t="luminaires.list.enter-serialnumber">Bitte geben Sie eine neue Seriennummer ein</h2>
<input value.bind="serialNumber" />
</ux-dialog-body>
<ux-dialog-footer>
<button click.trigger="controller.cancel()" t="luminaires.list.cancel">Abbrechen</button>
<button click.trigger="controller.ok(serialNumber)" t="luminaires.list.ok">Ok</button>
</ux-dialog-footer>
</ux-dialog>
</template>
and related view-model:
import {DialogController} from "aurelia-dialog";
import {Controller} from "aurelia-templating";
export class SerialnumberDialog {
private static inject = [DialogController];
private serialNumber: string;
private controller: any;
constructor(controller: Controller) {
this.controller = controller;
}
}
I want to change the color of the following sentence sometimes.
<h2 t="luminaires.list.enter-serialnumber">Bitte geben Sie eine neue Seriennummer ein</h2>
For example when some body give a repetitious serial number, I want to change the colour to red. I can open the dialog through the following code:
this.dialogService.open({ viewModel: SerialnumberDialog, lock: false })
.whenClosed((response) => {......
I want to use Aurelia concept for this purpose. Could you please tell me the solution?

Answer 1

I would use the css.bind method on the <h2> element. I would create a method on your view model to be able to decide whether you want the text to be red or not, and then store the styles in a css variable.
import {DialogController} from "aurelia-dialog";
import {Controller} from "aurelia-templating";
export class SerialnumberDialog {
private static inject = [DialogController];
private serialNumber: string;
private controller: any;
constructor(controller: Controller) {
this.controller = controller;
this.myCss = {
color: 'black'
};
}
activate(){
if(//serial number is repetitious){
this.myCss.color = red;
}
}
}
Now you have a myCss object which can be bound to your view to alter the colour of your text.
<h2 t="luminaires.list.enter-serialnumber" css.bind="myCss">
Bitte geben Sie eine neue Seriennummer ein
</h2>
Dwayne Charrington does a great article on css binding on his ILikeKillNerds blog https://ilikekillnerds.com/2016/02/binding-with-style-in-aurelia/ if you want any more information.