how to add Dynamic Conditional Background Images in angular 8

Question

I am new to Angular (8). I am trying to add background image with condition. Please help me to sort it out. following is my code.

<div class="kt-avatar__holder"
[ngStyle]="{'background-image': if addUser.value.attachmentURL? {{addTDAUser.value.userImage}} else'../assets/media/users/300_20.jpg'}">
  
Content

</div>

Mridul · Accepted Answer · 2020-04-07 09:02:19Z

4

You can use [ngStyle] like this

<div class="kt-avatar__holder" style="height: 200px; width: 200px;"
        [ngStyle]="{'background-image': addUser.value.attachmentURL ? 'url(' + addTDAUser.value.userImage + ')' : 'url(' + '../assets/media/users/300_20.jpg' + ')' }">
       Content
</div>

edited Apr 7, 2020 at 9:02

answered Apr 7, 2020 at 6:41

Mridul

1,3661 gold badge8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Atif Azad Over a year ago

it's still not working just vanished all the below form field

Mridul Over a year ago

Create a stackblitz example.

Atif Azad Over a year ago

Its still not work but i found the solution now i am using static background image and for addTDAUser.value.userImage using <img src="addTDAUser.value.userImage "> Vote Up thanks for your help

Ente · Accepted Answer · 2021-09-29 21:55:51Z

2

<div class="event-thumbnail"
    [ngStyle]="{'background-image': item.logoURL ? 'url(' + item.logoURL + ')' : 'url(' + 'assets/img/default/event-1.png' + ')' }">

edited Sep 29, 2021 at 21:55

Ente

2,4921 gold badge21 silver badges37 bronze badges

answered Sep 29, 2021 at 11:12

Tayyab Roy

5135 silver badges9 bronze badges

1 Comment

Ente Over a year ago

This answer could be greatly improved If you share why you think the code snippet posted solves the question.

Collectives™ on Stack Overflow

how to add Dynamic Conditional Background Images in angular 8

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related