Angular [ngClass] convert one line if statement to multiple if

Question

I found a [ngClass] solution for my project. The Code is

[ngClass]= (controlDir && controlDir.control && controlDir.control.touched) ? (!controlDir.control.valid) ? 'is-invalid' : 'is-valid' : null"

This code is work nicely. But I want to convert it to like this pattern.

[ngClass]="{'is-invalid': **statement**, 'is-valid': **statement**}"

How can i split this ?

Answer 1

You can try smth like:

[ngClass]="{
     'is-invalid': controlDir?.control?.touched && !controlDir.control.valid,
     'is-valid': controlDir?.control?.touched && controlDir.control.valid 
}"