Combine [NgStyle] With Condition (if..else)
AngularAngular2 TemplateAngular Problem Overview
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?
Angular Solutions
Solution 1 - Angular
One can also use this kind of condition:
<div [ngStyle]="myBooleanVar && {'color': 'red'}"></div>
It requires a bit less string concatenation...
Solution 2 - Angular
Using a ternary operator inside the ngStyle binding will function as an if/else condition.
<div [ngStyle]="{'background-image': 'url(' + value ? image : otherImage + ')'}"></div>
Solution 3 - Angular
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>
Solution 4 - Angular
You can use this as follows:
<div [style.background-image]="value ? 'url(' + imgLink + ')' : 'url(' + defaultLink + ')'"></div>
Solution 5 - Angular
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' }">
Solution 6 - Angular
<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';}
Solution 7 - Angular
> 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>
Solution 8 - Angular
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>
Solution 9 - Angular
[ngStyle] with condition based if and else case.
Solution 10 - Angular
Use:
[ngStyle]="{'background-image': 'url(' +1=1 ? ../../assets/img/emp-user.png : ../../assets/img/emp-default.jpg + ')'}"