ternary operators in binding angular 5

Question

I have an issue and I cant seem to figure it out, basically I'm trying to use a ternary if statement in a [src] attribute in angular

<img class="author-head" [src]="(asset.fields.authorHeadImage != null || asset.fields.authorHeadImage != undefined ) ? asset.fields.authorHeadImage?.fields?.file.url : ../../../../assets/Images/CustomContent/author.jpg" >

basically what Im trying to do here is if asset.fields.authorHeadImage is null or asset.fields.authorHeadImage is undefined show this predetermined image but if there is an authorHeadImage then use that image src..

but I keep getting these massive errors in my console that dont really mean anything?

Any help would be appreciated

Thanks

EDIT

I switched the operators around and now Im getting this error it says I have an unexpected fullstop at column 136 but there are no rogue fullstops?

Parser Error: Unexpected token . at column 136 in [(asset.fields.authorHeadImage != null || asset.fields.authorHeadImage != undefined) ? asset.fields.authorHeadImage?.fields?.file.url : ../../../../assets/Images/CustomContent/drsultan.jpg] in ng:///MainModule/ProgramItemComponent.html@5:37 ("
      <div *ngIf="asset.fields.showAuthorHead === true">
        <img class="author-head" [ERROR ->][src]="(asset.fields.authorHeadImage != null || asset.fields.authorHeadImage != undefined) ? asset.fi"): ng:///MainModule/ProgramItemComponent.html@5:37
Parser Error: Unexpected token . at column 136 in [(asset.fields.authorHeadImage != null || asset.fields.authorHeadImage != undefined) ? asset.fields.authorHeadImage?.fields?.file.url : ../../../../assets/Images/CustomContent/drsultan.jpg] in ng:///MainModule/ProgramItemComponent.html@5:37 ("ile.url : ../../../../assets/Images/CustomContent/drsultan.jpg" >

Do you see any error related to this code. Do you still get errors when you comment out your code? — Sangram Nandkhile
– Sangram Nandkhile, Commented Mar 5, 2018 at 23:36
You are missing single quotes around image source file. That could be the problem. — Sangram Nandkhile
– Sangram Nandkhile, Commented Mar 5, 2018 at 23:41

Martin Parenteau · Accepted Answer · 2019-08-19 13:22:11Z

5

The following syntaxes should work. The alternate URL is surrounded with single quotes since it is a literal string. In the first syntax, the two NOT operators !! make it clear that the value it treated as a boolean in the condition.

<img [src]="!!asset.fields.authorHeadImage ? asset.fields.authorHeadImage : '../../../../assets/Images/CustomContent/author.jpg'" ... >
<img [src]="asset.fields.authorHeadImage || '../../../../assets/Images/CustomContent/author.jpg'" ... >

edited Aug 19, 2019 at 13:22

answered Mar 5, 2018 at 23:39

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

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

4 Comments

Muhammed Albarmavi Over a year ago

is it true that the value of src property will evaluate in every change detection cycle is ite the same as function call [src]="getUrl()"

Martin Parenteau Over a year ago

@malbarmawi - As far as I know, every binding expression is evaluated on change detection. The expression in the answer above will be evluated every time, yes, as would be a method call or a simple property. By the way, calling a method is not bad, as long as it executes quickly (see these guidelines).

Lautaro Jorge Garcia Over a year ago

What if i have three possibilities, how can i add a second condition to the ternary operator?

Martin Parenteau Over a year ago

@lautarojgarcia177 - You could try something like [src]="cond1 ? val1 : (cond2 ? val2 : val3)".

Sangram Nandkhile · Accepted Answer · 2018-03-05 23:43:19Z

3

Haven't tested but something like this should be a way to go. Keeps your html cleaner.

 <img class="author-head" [src]="asset.fields.authorHeadImage != null  ? asset.fields.authorHeadImage : myImgUrl" >

.ts file

export class App{
   myImgUrl: string='../../../../assets/Images/CustomContent/author.jpg';
}

answered Mar 5, 2018 at 23:43

Sangram Nandkhile

18.2k19 gold badges85 silver badges116 bronze badges

Collectives™ on Stack Overflow

ternary operators in binding angular 5

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related