In this article we will learn about some of the frequently asked TypeScript programming questions in technical like “ngclass angular” Code Answer’s. When creating scripts and web applications, error handling is an important part. If your code lacks error checking code, your program may look very unprofessional and you may be open to security risks. Error or stack handling on typescript was simple and easy. An error message with filename, line number and a message describing the error is sent to the browser. This tutorial contains some of the most common error checking methods in Typescript. Below are some solution about “ngclass angular” Code Answer’s.
ngClass
xxxxxxxxxx
1
//Type one
2
[class.my_class] = "step === 'step1'"
3
4
//Type two
5
[ngClass]="{'my_class': step === 'step1'}"
6
and multiple option:
7
[ngClass]="{'my_class': step === 'step1', 'my_class2' : step === 'step2' }"
8
9
//Type three
10
[ngClass]="{1 : 'my_class1', 2 : 'my_class2', 3 : 'my_class4'}[step]"
11
12
//Type four
13
[ngClass]="step == 'step1' ? 'my_class1' : 'my_class2'"
ngstyle
xxxxxxxxxx
1
<div [ngStyle]="{'background-color':person.country === 'UK' ? 'green' : 'red' }"></<div>
Angular 8 ngClass If
xxxxxxxxxx
1
[ngClass]="(step=='step1')?'my-class1':'my-class2'"
angular ngclass
xxxxxxxxxx
1
2
content_copy
3
4
<some-element [ngClass]="'first second'"></some-element>
5
6
<some-element [ngClass]="['first', 'second']"></some-element>
7
8
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}"></some-element>
9
10
<some-element [ngClass]="stringExp|arrayExp|objExp"></some-element>
11
12
<some-element [ngClass]="{'class1 class2 class3' : true}"></some-element>
13
ngClass
xxxxxxxxxx
1
[ngClass]="{'my_class': step === 'step1', 'my_class2' : step === 'step2' }"
2
ngclass angular
xxxxxxxxxx
1
<div [ngClass]="{
2
'green': number > 5,
3
'red': number <= 5,
4
}" ></div>
5
//if the number is over 5, the class 'green' will be added to the div.
6
//if the number is below or equal 5, the class 'red' will be added to the div.
