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
– Hack-R, Commented Oct 12, 2016 at 15:51

Maximilian Riegler · Accepted Answer · 2016-10-12 16:10:14Z

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>

edited Oct 12, 2016 at 16:10

answered Oct 12, 2016 at 15:59

Maximilian Riegler

23.6k4 gold badges65 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maximilian Riegler Over a year ago

Glad, I could help you! :)

mavrick9009 · Accepted Answer · 2016-10-12 15:54:25Z

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, 2016 at 15:54

mavrick9009

11 bronze badge

1 Comment

Richard Over a year ago

Thanks @mavrick9009. I am going with rinukkusu's solution, because I think it's better if there is less in the DOM.

Collectives™ on Stack Overflow

HTML Loop with If Statement

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related