How to have if condition for css class?

When editing my component, the column grids also are changed.

Currently, I have this for my edit-component.html

<div class="col-6" *ngIf="!edit">
Column1
</div>
<div class="col-12 col-md-4 col-sm-2" *ngIf="edit">
Column1
</div>
<div class="col-6" *ngIf="!edit">
Column2
</div>
<div class="col-12 col-md-4 col-sm-2" *ngIf="edit">
Column2
</div>


And I have this for edit-component.ts

edit: boolean = false;


This method works and the css is changing when editting or readonly. But is there other way that I can have if condition for col-12 col-md-5 and col-6?

Continue reading...