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

User · Answer

ngStyle  with condition based if and else case   lt label for  quot file quot   ngStyle   quot isPreview     cursor    default       cursor    pointer   quot  gt Attachment

User · Answer

Use    ngStyle     background-image    url    1 1         assets img emp-user png         assets img emp-default jpg

User · Answer

Using a ternary operator inside the ngStyle binding will function as an if else condition    lt div  ngStyle     background-image    url     value   image   otherImage         gt  lt  div gt

User · Answer

You can use this as follows   lt div  style background-image   quot value    url     imgLink          url     defaultLink       quot  gt  lt  div gt

User · Answer

The previous answers did not work for me  so I decided to improve this   You should work with url      and not with value    lt li  ngFor  let item of items  gt     lt div     class  img-wrapper       ngStyle     background-image    item featured    url   images img1 png        url   images img2 png       gt     lt  div gt   lt  li gt

User · Answer

One can also use this kind of condition    lt div  ngStyle   myBooleanVar  amp  amp    color    red    gt  lt  div gt    It requires a bit less string concatenation

User · Answer

lt h2  ngStyle   serverStatus     Offline     color    red   color   green    gt Server with ID    serverId   is   getServerStatus      lt  h2 gt    or you can also use something like this    lt h2  ngStyle    backgroundColor  getColor     gt Server with ID    serverId   is   getServerStatus     lt  h2 gt    and in the   ts  getColor   return this serverStatus      Offline     red     green

User · Answer

Trying to set background color based on condition      Consider variable x with some numeric value       lt p  ngStyle     backgroundColor  x  gt  4    lightblue     transparent     gt          This is a sample Text  lt  p gt

User · Answer

To add and simplify G  nter Z  chbauer s the example incase using  if   else  to set something else than background image     lt p  ngStyle   value    10  amp  amp     font-weight    bold     gt

User · Answer

I have used the below code in my existing project    lt div class  form-group   ngStyle     border  isSubmitted  amp  amp  form data controls first name errors  1px solid red        gt   lt  div gt

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

Examples related to angular

Examples related to angular2-template