Как использовать [ngClass] с простым условием и троичным условием?

Question

У меня есть серия тегов, которые представляют шаги. Как показано здесь, если первый шаг является текущим, примените класс step-active.

<a (click)="goStep2" [ngClass]="{'step-active': currentStep === 1 }">
 Step 1
</a>

Теперь я хотел бы также добавить еще одно условие, относящееся к содержанию страницы. Давайте пользователь ответил на все необходимые вопросы. Я хотел бы выделить шаг зеленым, если шаг действителен, в противном случае красным.

<a (click)="goStep2" [ngClass]="{'step-active': currentStep === 1,
    isValid ? 'valid-state' : 'invalid-state' }">
 Step 1
</a>

Я получаю ошибку об отсутствии :. Как применять эти 2 условия, если первое условие является простым, а второе - троичным.

Спасибо за помощь

Answer 1

<a (click)="goStep2" [ngClass]="{'step-active': currentStep === 1,
    'valid-state' : isValid, 'invalid-state': !isValid }">
 Step 1
</a>