Angular: Using the Ternary Operator in HTML Template

Ternary operator for values in Angular 2+ template

You can use Conditional (ternary) operator, inside of template like below example

 <span> {{selectedSport.key === 'walking' ? 'steps' : 'km'}} </span>

Angular: Using the ternary operator in html template

1) Is the ternary operator too expensive to be executed each digest cycle?

The ternary operator itself should not be to expensive to be executed at each digest cycle. A ternary operator should evaluate in the region of microseconds. With that said, if you call a function that evaluates to a truthy/falsy or if your ternary operator itself calls a function, then it could take upwards of milliseconds depending on how expensive your function is.

2) Should this function be avoided or used sparingly?

If they are clean ternary operators, i.e. make explicit comparisons without function calls, then you should be able to use as many as you like, there should be no significant impact.

3) Everywhere I look for an answer I see that it is comparable to an if/else statement in terms of speed, but in html there isn't really an equivalent to an if/else statement.

This is clearly a misunderstanding on your part of how Angular Interpolation works. I suggest reading up on Template Syntax.

Angular template ternary or method

Both ternary template expression and method call will have roughly same performance impact in AOT compilation mode, which is negligible here and isn't a subject for optimization.

$event.keyCode !== 188 ? $event.keyCode !== 190: $event.preventDefault()

and

if (_event.keyCode === 188 || _event.keyCode === 190)
{
    _event.preventDefault();
}

are different things.

Ternary expression won't call $event.preventDefault() in case when $event.keyCode === 190.

It should be:

($event.keyCode === 188 || $event.keyCode === 190) && $event.preventDefault()

And a cleaner way is to move implementation details to keypress method.

Another option is to use pure pipe, but it won't have any performance benefits in this case because $event is new object every time.

Using ternary operator to calculate property value in Angular

You can use template-syntax to bind value attribute like:

<mat-progress-bar 
  mode="determinate" 
  [value]="step >= 2 ? 100 : 50" 
  class="vertical-progress-bar">
</mat-progress-bar>

Also, I think this here:

step => 2 ? 100 : 50

is a typo. In case you want to check if step is greater than or equal to a value, then we need to use >= expression, instead of doing => which represent an arrow function expression in javascript.

ternary operator does not work in angular

You're binding your table to list. If the list is empty, then there are 0 rows in your table and your ternary expression is never run. Your ternary expression is only ever run when you have a non-empty list.

Instead, use *ngIf to hide the table and show the empty message.

<table mat-table [dataSource]="list" class=" w-100" *ngIf="list.length">

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>header</th>
    <td mat-cell *matCellDef="let element">
      {{element.name}}
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<p *ngIf="!list.length">
  the list is empty
</p>

And ternary expressions do work in Angular. Try this:

<p>{{list.length ? 'has rows' : 'does not have rows'}}</p>

DEMO: https://stackblitz.com/edit/angular-at5wet

Pipe in ternary expression in html

You cannot interpolate in an interpolation and {{ {{ }} }} makes a problem.

Furthermore, I'd rather use parenthesis to group the whole expression to translate:

<h3 mat-dialog-title>
    {{ (user ?  "EDIT_USER" : "NEW_USER") | translate | async }}
</h3>

Is it possible to embed html in a ternary in angular expression?

You can use ternary for inner text and ngClass to toggle classes as following:

<i class="far" [ngClass]="{'fa-save' : user.id, 'fa-plus-quare': !user.id}">
    {{user.id ? 'Save' : 'Add'}}
</i>

Hope this helps.

Angular js (1.4) Using Ternary operator inside ng-repeat to show different html?

the ternary operator isn't gona work for template like this, it'll have to look like this...

<td ng-if="value.includes('http')" hkey="{{field}}"> <a href ="{{value}}">{{value}}</a></td>
<td ng-if="!value.includes('http')" hkey="{{field}}">{{value}}</td>

but be careful as this is not great for change detection since you'll run that includes check 2xN params on every change detection cycle.

if you can reliably do like:

ng-if="field === 'Source Link'"

instead, that would perform better, or you're at least better off using value.startsWith('http')

---

Related Topics