How to add styles based on condition

Question

I am trying to add css to my div based on my input checkbox

<div class="pvreveal"  [style]="ShowHideSection ? 'overflow:scroll;height:483px':''"  >
 <input id="isDelivery" type="checkbox" [(ngModel)]="ShowHideSection " />
</div

How to achieve this

Does this answer your question? [Angular - Style Based On Condition](https://stackoverflow.com/questions/43663839/angular-style-based-on-condition) - i.e. `Text` — EGC, Jan 09 '20 at 23:21

score 2 · Accepted Answer · answered Jan 09 '20 at 23:23

By using [ngClass]. I am not a big fan of inline styles

//CSS

.myClass{overflow:scroll;height:483px}

//Component

export class MyComponent {

    public ShowHideSection : boolean = true;
}

//HTML

<div class="pvreveal"  [ngClass]="{'myClass' : ShowHideSection}"  >
 <input id="isDelivery" type="checkbox" [(ngModel)]="ShowHideSection " />
</div>

How to add styles based on condition

1 Answers1