CODEWITHSUNDEEP
angulartypescriptobservabletemplating
sandrooco
sandrooco

Reputation: 8716

TS Observable & ng: proper templating syntax

I have an observable "applicationDetail" (private applicationDetail: Observable<ApplicationDetail>;). I bind the values like this:

<h2 class="detailViewH2">{{ (applicationDetail | async)?.AttendeeName }}</h2>
<p>{{ (applicationDetail | async)?.AttendeeFunction }} </p>

This doesn't seem like proper templating syntax to me, isn't there a way to generally say "applicationDetail" will be async and all it's props should use the safe navigation operator?

Upvotes: 2

Views: 59

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657078

In Angular4 you can work around this using *ngIf

<ng-container *ngIf="(applicationDetail | async) as foo">
  <h2 class="detailViewH2">{{foo.AttendeeName }}</h2>
  <p>{{foo.AttendeeFunction }} </p>
</ng-container>

You can also create your own structural directive that doesn't remove the content when the expression is false but otherwise provides this functionality.

Upvotes: 2

Related Questions