75

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?

Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124

10 Answers10

122

One can also use this kind of condition:

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

It requires a bit less string concatenation...

Zohar
  • 1,681
  • 1
  • 15
  • 13
  • 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 Fox 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 Fox May 10 '22 at 00:35
92

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

<div [ngStyle]="{'background-image': 'url(' + value ? image : otherImage + ')'}"></div>
Günter Zöchbauer
  • 558,509
  • 191
  • 1,911
  • 1,506
28

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>
Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
Johnatan Maciel
  • 493
  • 6
  • 10
16

You can use this as follows:

<div [style.background-image]="value ? 'url(' + imgLink + ')' : 'url(' + defaultLink + ')'"></div>
Johnatan Maciel
  • 493
  • 6
  • 10
somratexel
  • 171
  • 1
  • 4
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' }">
Antti A
  • 347
  • 3
  • 11
2
<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';}
David Buck
  • 3,594
  • 33
  • 29
  • 34
michael B
  • 21
  • 3
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>
Soura Ghosh
  • 805
  • 1
  • 8
  • 15
1
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>
Amit Baderia
  • 3,076
  • 2
  • 19
  • 17
1

[ngStyle] with condition based if and else case.

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

Priti jha
  • 85
  • 4
0

Use:

[ngStyle]="{'background-image': 'url(' +1=1 ? ../../assets/img/emp-user.png : ../../assets/img/emp-default.jpg + ')'}"
Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
jayaraman raman
  • 21
  • 3