Ng Templates and Calling a Function/Method on the Bound Component

Question

Here is some simple template markup:

<ng-container *ngIf="let ud = getUpdated()">
  <label>Updated</label>
  <span>{{ud | date:'MMM/y'}}</span>
</ng-container>

Now, while the method getUpdated() is defined on the bound component, two issues arise. Typescript complains:

[Angular] TypeError: Cannot read property 'toUpperCase' of undefined

and further issues are expressed in subsequent blocks. Then, in lieu of building a full-blown @Pipe for this one-off getUpdated(), what am I missing to make this work?

I did but read in a confusing way. I have clarified in update. — CNSKnight, Jan 24 '18 at 18:03

score 2 · Answer 1 · edited Jan 24 '18 at 18:07

This highlights differences in syntax between use of NgForOf and NgIf.

From the docs:

// NgForOf provides several exported values that
// can be aliased to local variables:

<li *ngFor="let user of userObservable | async as users; index as i; first as isFirst">
   {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default</span>
</li>

Two options are available to assign to a template-local variable in-place:

1) Using as syntax:

<ng-container *ngIf="getUpdated() as ud">
  <label>Updated</label>
  <span>{{ ud | date: 'MMM/y' }}</span>
</ng-container>

2) Using let syntax:

<ng-container *ngIf="getUpdated(); let ud">
  <label>Updated</label>
  <span>{{ ud | date: 'MMM/y' }}</span>
</ng-container>

Ng Templates and Calling a Function/Method on the Bound Component

1 Answers1