Combine [NgStyle] With Condition (if..else)

Question

I have read NgStyle Documentation For Angular 2, and it is a little bit confusing for me. How do I use NgStyle with condition like (if...else) to set background image of any element?

score 135 · Answer 1 · answered Sep 07 '17 at 06:42

135

One can also use this kind of condition:

<div [ngStyle]="myBooleanVar && {'color': 'red'}"></div>

It requires a bit less string concatenation...

answered Sep 07 '17 at 06:42

Zohar

1,820
1
18
16

5

This is by far most useful example, because it sets the style if condition is met and leaves it untouched otherwise. – assassinatorr Oct 13 '20 at 06:17
how do we use this "if" in addition to a style that uses a real "if else" like Gunter's answer, all in the same ngStyle? can't make a new div easily but need to do this – Collin Sep 01 '21 at 19:05
@assassinatorr I discovered you can also do this with the ? and : if you use ': null' or '? null'. This is useful if you would like to specify an if else in addition to just an 'if" in the same line. – Collin May 10 '22 at 00:35
2

It seems this won't work with TS, strict typing and Angular 14 anymore (haven't tested earlier versions though). You'll get `Type 'false | { color: string; }' is not assignable to type '{ [klass: string]: any; } | null'.`. So ternary with `null` is like the alternative now. – insertusernamehere Jun 17 '22 at 06:44
Sadly you are right @insertusernamehere – Zohar Jun 19 '22 at 16:36
4

What still should work however is this: `booleanVar && {color: 'red'} || null`. – insertusernamehere Jun 19 '22 at 16:56

Günter Zöchbauer · Accepted Answer · 2018-05-23T19:46:53.883

101

Using a ternary operator inside the ngStyle binding will function as an if/else condition.

<div [ngStyle]="{'background-image': 'url(' + value ? image : otherImage + ')'}"></div>

edited May 23 '18 at 19:46

answered May 05 '16 at 13:13

Günter Zöchbauer

623,577
216
2,003
1,567

score 34 · Answer 3 · edited Oct 31 '19 at 01:47

34

The previous answers did not work for me, so I decided to improve this.

You should work with url(''), and not with value.

<li *ngFor="let item of items">
  <div
    class="img-wrapper"
    [ngStyle]="{'background-image': !item.featured ? 'url(\'images/img1.png\')' : 'url(\'images/img2.png\')'}">
  </div>
</li>

edited Oct 31 '19 at 01:47

Peter Mortensen

30,738
21
105
131

answered May 09 '18 at 03:45

Johnatan Maciel

553
6
10

score 20 · Answer 4 · edited Oct 01 '20 at 21:20

20

You can use this as follows:

<div [style.background-image]="value ? 'url(' + imgLink + ')' : 'url(' + defaultLink + ')'"></div>

edited Oct 01 '20 at 21:20

Johnatan Maciel

553
6
10

answered Oct 04 '18 at 06:33

somratexel

351
3
4

score 6 · Answer 5 · edited Nov 30 '22 at 09:51

6

[ngStyle] with condition based if and else case.

<label for="file" [ngStyle]="isPreview ? {'cursor': 'default'} : {'cursor': 'pointer'}">Attachment</label>

edited Nov 30 '22 at 09:51

Rohan Kumar

40,431
11
76
106

answered Oct 21 '20 at 14:47

Priti jha

145
1
4

score 3 · Answer 6 · answered Dec 15 '19 at 10:11

3

To add and simplify Günter Zöchbauer's the example incase using (if...else) to set something else than background image :

<p [ngStyle]="value == 10 && { 'font-weight': 'bold' }">

answered Dec 15 '19 at 10:11

Antti A

410
4
12

score 3 · Answer 7 · edited Jan 23 '20 at 14:41

3

<h2 [ngStyle]="serverStatus == 'Offline'? {'color': 'red'{'color':'green'}">Server with ID: {{serverId}} is {{getServerStatus()}} </h2>

or you can also use something like this:

<h2 [ngStyle]="{backgroundColor: getColor()}">Server with ID: {{serverId}} is {{getServerStatus()}}</h2>

and in the *.ts

getColor(){return this.serverStatus === 'Offline' ? 'red' : 'green';}

edited Jan 23 '20 at 14:41

David Buck

3,752
35
31
35

answered Jan 23 '20 at 14:12

michael B

31
3

score 2 · Answer 8 · answered Feb 16 '20 at 17:52

2

I have used the below code in my existing project

<div class="form-group" [ngStyle]="{'border':isSubmitted && form_data.controls.first_name.errors?'1px solid red':'' }">
</div>

answered Feb 16 '20 at 17:52

Soura Ghosh

879
1
9
16

score 2 · Answer 9 · answered Jun 13 '20 at 15:06

2

Trying to set background color based on condition:   

Consider variable x with some numeric value.    
<p [ngStyle]="{ backgroundColor: x > 4 ? 'lightblue' : 'transparent' }">
        This is a sample Text
</p>

answered Jun 13 '20 at 15:06

Amit Baderia

4,454
3
27
19

score 1 · Answer 10 · edited Jan 09 '23 at 04:44

This is an example in a "let element" case where 'devices' is my variable of type number.

[ngStyle]="{'background-color': (element.devices >= 31.5) ? ('green') : (element.devices === 23.5) ? ('gold') : ('red')}"

this has two conditionals where if devices >= 31.5 will be green and if it's not true then evaluate the second condition that is devices === 23.5 will be gold and if this is false too, then goes red color. You can add more than one conditional like that but you need to finish with an "else" or with a default element.

Collin · Answer 11 · 2023-07-13T17:29:33.303

1

Today I discovered how to use else if with ngStyle, allowing as many conditions as you want:

 [ngStyle]="(myCondition1 === 'hello' && {'background-color': 'purple'}) 
 
 || (myCondition1 === 'world' && {'background-color': 'orange'}) 

 || (myCondition1 === 'fubar' && {'background-color': 'red'})"

Note: the "&&" here might make more sense if it was a "->" but that's just how the syntax is I guess.

edited Jul 13 '23 at 17:29

answered Jun 08 '23 at 16:18

Collin

394
5
14

score 0 · Answer 12 · edited Oct 31 '19 at 01:44

0

Use:

[ngStyle]="{'background-image': 'url(' +1=1 ? ../../assets/img/emp-user.png : ../../assets/img/emp-default.jpg + ')'}"

edited Oct 31 '19 at 01:44

Peter Mortensen

30,738
21
105
131

answered Oct 19 '19 at 14:04

jayaraman raman

31
3

Combine [NgStyle] With Condition (if..else)

12 Answers12

Linked