<p class="{{condition ? 'checked' : 'unchecked'}}">
<!-- or -->
<p [ngClass]="condition ? 'checked' : 'unchecked'">
<!--or -->
<p [ngClass]="[condition ? 'checked' : 'unchecked']">
[ngClass]="{'my-class': step === 'step1'}"
[ngClass]="{'my-class': step=='step1'}"
[ngClass]="(step=='step1')?'my-class1':'my-class2'"
[ngClass]="(step=='step1')?'my-class1':'my-class2'"
<i [class]="user.login_status == 1 ? 'fas fa-circle user_active' : 'fas fa-circle user_inactive'" aria-hidden="true"></i>
[class.my-class]="step === 'step1'"
[ngClass]="{'my-class': step=='step1', 'my-class2':step=='step2' }"
[ngClass]="{'my-class': step === 'step1', 'my-class2':step === 'step2' }"
[ngClass]="{'myclass1': match === 'match1'}"
[ngClass]="{'myclass2': match === 'match1', 'myclass2' : match === 'match2' }"
[ngClass]="{1:'my-class1',2:'my-class2',3:'my-class4'}[step]"
[class.my-class]="step=='step1'"