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?
-
5angular.io/api/common/NgClass#how-to-useVega– Vega2017-08-28 18:42:57 +00:00Commented Aug 28, 2017 at 18:42
-
5Possible duplicate of Assign classes conditionally in Angular2Jota.Toledo– Jota.Toledo2017-08-28 18:47:13 +00:00Commented Aug 28, 2017 at 18:47
Add a comment
|
3 Answers
You need to use NgClass along with property binding.
<div [ngClass]="displaysidebar ? 'col-md-9' : 'col-md-12'">
Comments
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';">
Comments
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;
}
}
3 Comments
Rahul Singh
dv is appreciated @jota haha, great way to support community now i guess
FAISAL
Rahul you are assigning string value to a boolean variable.
Rahul Singh
@Faisal thanks mate a typo my bad , had a spat with some one here thanks mate , i was editing it might have missed it . first it was like
sidebar ===" true" . i changed to boolean missed that.