*ngIf and ng-template?

Ionic Framework ionic-v3
1

Hello i’m trying to use *ngIf with ng-template.

<div *ngIf="(posts[key]?.date | date:'EEEE d MMMM') == (today | date:'EEEE d MMMM'); then isToday else notToday"></div>
     <p class="date">
        <ng-template #isToday>Vandaag, {{ posts[key]?.date | date:'shortTime' }} uur</ng-template>
        <ng-template #notToday>{{ posts[key]?.date | date:'EEEE d MMMM' }}</ng-template>
     </p>

The *ngIf works but the P element is put in a really weird location in the dom.

Chrome console:
image

Where am I going wrong?

2 
 <div class="date">
         <span *ngIf="(posts[key]?.date | date:'EEEE d MMMM') == (today | date:'EEEE d MMMM'); else notToday">
               Vandaag, {{ posts[key]?.date | date:'shortTime' }} uur
          </span>
          <ng-template #notToday>{{ posts[key]?.date | date:'EEEE d MMMM' }}</ng-template>
 </div>

Works but i cant use P instead of div? Wondering why exactly.

3

This is doing too much inefficient stuff in the template that gets executed way too often. I would redesign this.

In the service provider code that populates what goes into posts, I would loop through and set a today property on all of today’s posts.

Is there any way you can restructure this to use a normal ngFor across an array instead of having to keep looking things up with object access [key] syntax?

1 Like
4

Thanks i took your advice and made some changes :slight_smile: