Angular2 applying css classes with conditions

Question

I would like to apply a class with col-md-9 if displaysidebar is true else class should be col-md-12

This is what i have tried but fails to work

<div class=" displaysidebar ? col-md-9 : col-md-12 ">

Where am i going wrong?

Answer 1

You need to use NgClass along with property binding.

<div [ngClass]="displaysidebar ? 'col-md-9' : 'col-md-12'">

Answer 2

Can do in either way:

<div [ngClass]="{'col-md-9': displaysidebar, 'col-md-12': !displaysidebar} ">

or

<div [ngClass]="displaysidebar? 'col-md-9': 'col-md-12';">

Answer 3

It should be something like

Template

 <div [ngClass]="(displaysidebar) ? 'col-md-9': 'col-md-12' ">

Component

   export class App {
      displaysidebar : boolean;
      constructor() {
        this.displaysidebar = true;
       }   

    }