Angular - pass variable to HTML

Issue

I have the HTML

<mat-card *ngFor="let shift of employer.shifts">

    <mat-card-content>

        <div *ngIf="getShiftLocation(shift);">

            <div>{{ getShiftLocation(shift)['title'] }}</div>
            <div>{{ getShiftLocation(shift)['phone'] }}</div>
            <div>{{ getShiftLocation(shift)['manager'] }}</div>                         

        </div>

    </mat-card-content>

</mat-card>

There's the function getShiftLocation(shift) which returns Location object's field value

The question is: is there any way to set the whole Location object in this HTML in order I could use it?

For example:

<pre>

   <div #location="getShiftLocation(shift)">
       <div>{{location.title}}</div>
   </div>
    
</pre>

Maybe the other way as well.

Solution

One solution would be to save the result into a template variable, using syntactic sugar of the ngIf directive it will look like:

<mat-card *ngFor="let shift of employer.shifts">

  <mat-card-content>
    <div *ngIf="getShiftLocation(shift) as shiftLocation">
      <div>{{ shiftLocation.title }}</div>
      <div>{{ shiftLocation.phone }}</div>
      <div>{{ shiftLocation.manager }}</div>                         
    </div>
  </mat-card-content>
</mat-card>

But keep in mind that the method will eventually be called in each change-detection circle, so don't do complex calculations or CPU intensive tasks inside it.

Note: Also you should use the trackBy functionality of the ngForOf directive for better control when angular should reuse DOM elements.

Answered By - cyr_x