HTML Loop with If Statement

Question

I am using Ionic2/Angular2. I have a collection of messages which I loop through and display their details.

<div *ngFor="let message of messages" class="message-wrapper">
  <div *ngIf="!exists(message)">
    <div *ngIf="message.changeDate">
      <center><span class="message-datetime">{{message.createdAt | amDateFormat: 'DD MMM YYYY'}}</span></center>
    </div>
    <div [class]="'message message-' + message.ownership">
      <div class="message-content">server:{{message.content}}</div>
      <span class="time-tick">
    <span class="message-timestamp">{{message.createdAt | amDateFormat: 'h:mm a'}}</span>
      <div *ngIf="message.readByReceiver && senderId == message.senderId">
        <span class="checkmark">
          <div class="checkmark_stem"></div>
          <div class="checkmark_kick"></div>
      </span>
      </div>
      </span>
    </div>
  </div>
</div>

As you can see, I am using an if statement (<div *ngIf="!exists(message)">) to decide whether to display the message row.

My problem is, even though I have the if statement, and it only displays the correct rows, the non displayed messages are still taking up scroll space. What I mean by that is that there are blank spaces where the non displayed messages would be.

As you can see here, there is some empty space after the last message.

Question

Can I structure this html so that if the row is filtered, it does not not take up any space?

Thanks

Can you give a runnable example using jFiddle or Stack Overflow's javascript tool or something? — Hack-R, Oct 12 '16 at 15:51

Maximilian Riegler · Accepted Answer · 2016-10-12T16:10:14.160

Wrap it in a template tag holding the loop. Templates won't get rendered so you can put them anywhere you need rendering logic with ngFor and ngIf at the same time.

<template ngFor let-message [ngForOf]="messages">
    <div *ngIf="!exists(message)" class="message-wrapper">
        <div *ngIf="message.changeDate">
            <center><span class="message-datetime">{{message.createdAt | amDateFormat: 'DD MMM YYYY'}}</span></center>
        </div>
        <div [class]="'message message-' + message.ownership">
            <div class="message-content">server:{{message.content}}</div>
            <span class="time-tick">
                <span class="message-timestamp">{{message.createdAt | amDateFormat: 'h:mm a'}}</span>
                <div *ngIf="message.readByReceiver && senderId == message.senderId">
                    <span class="checkmark">
                        <div class="checkmark_stem"></div>
                        <div class="checkmark_kick"></div>
                    </span>
                </div>
            </span>
        </div>
    </div>
</template>

Glad, I could help you! :) – Maximilian Riegler Oct 12 '16 at 16:10 — Maximilian Riegler, Oct 12 '16 at 16:10

score 0 · Answer 2 · answered Oct 12 '16 at 15:54

0

This sounds more like an html/css issue. Check the css for the "message-wrapper" class. Maybe move that class inside the ng-if statement, and leave the loop on a div with no class.

answered Oct 12 '16 at 15:54

mavrick9009

1
1

Thanks @mavrick9009. I am going with rinukkusu's solution, because I think it's better if there is less in the DOM. – Richard Oct 12 '16 at 16:09

HTML Loop with If Statement

2 Answers2