ngstyle
<div [ngStyle]="{'background-color':person.country === 'UK' ? 'green' : 'red' }"></<div>ngstyle
<div [ngStyle]="{'background-color':person.country === 'UK' ? 'green' : 'red' }"></<div>ngClass
//Type one
[class.my_class] = "step === 'step1'"
//Type two
[ngClass]="{'my_class': step === 'step1'}"
and multiple option:
[ngClass]="{'my_class': step === 'step1', 'my_class2' : step === 'step2' }"
//Type three
[ngClass]="{1 : 'my_class1', 2 : 'my_class2', 3 : 'my_class4'}[step]"
//Type four
[ngClass]="step == 'step1' ? 'my_class1' : 'my_class2'"ngclass in angular
Angular version 2+ provides several ways to add classes conditionally:
type one
[class.my_class] = "step === 'step1'"
type two
[ngClass]="{'my_class': step === 'step1'}"
and multiple option:
[ngClass]="{'my_class': step === 'step1', 'my_class2' : step === 'step2' }"
type three
[ngClass]="{1 : 'my_class1', 2 : 'my_class2', 3 : 'my_class4'}[step]"
type four
[ngClass]="step == 'step1' ? 'my_class1' : 'my_class2'"Angular 8 ngClass If
[ngClass]="{'my-class': step=='step1'}"ngClass
[ngClass]="{'my_class': step === 'step1', 'my_class2' : step === 'step2' }"angular ngclass
content_copy
<some-element [ngClass]="'first second'">...</some-element>
<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
