cssangular

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?

Solution

  • You can use the ngClass directive.

    <div [ngClass]="{'col-6': !edit, 'col-sm-2 col-md-4 col-12': edit}">
    Column1
</div>