How to have if condition for css class?

Issue

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>

Answered By – spots

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.