1

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.

enter image description here

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

Maximilian Riegler
  • 22,720
  • 4
  • 62
  • 71
Richard
  • 8,193
  • 28
  • 107
  • 228
  • Can you give a runnable example using jFiddle or Stack Overflow's javascript tool or something? – Hack-R Oct 12 '16 at 15:51

2 Answers2

4

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>
Maximilian Riegler
  • 22,720
  • 4
  • 62
  • 71
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.

  • 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