Displaying new items in a list on top

user_6635872 0
Viewed 82

By default when we use ngFor, the newest item is displayed below the first element.

For example a list contain: [Apple, Orange, Banana]

Using ngFor will display the list in order of-->

  • Apple
  • Orange
  • Banana

I would like to know a way to reverse the order and display the very last element (or any new elements that are pushed on top while the older elements are automatically moved below). i.e.

  • Banana
  • Orange
  • Apple

HTML:

<button (click)="deposit()">Deposit</button><br>
<button (click)="withdraw()">Withdraw</button>
<p>{{balance}}</p>

  <p *ngFor="let element of transactions">{{element}}</p>


  <router-outlet></router-outlet>

CSS:

.example {
    background-color: #eee;
    width: 200px;
    height: 100px;
    border: 1px dotted black;
    overflow: scroll; /* Add the ability to scroll */
    -ms-overflow-style: none;
    scrollbar-width: none;
    direction: ltr;
  }

  .example::-webkit-scrollbar {
    display: none;
}

Would appreciate if anyone could suggest a CSS attribute that once the list is overflown the oldest elements below "fade" away and can be seen only when we scroll down.

angular typescript css arrays html
2 Answers

I am not entirely sure what you want to achieve, but if you want to keep the original order, but only show the last element on top, you can do it by slicing the array and extracting last element:

<p>{{transactions[transactions.length - 1]}}</p>
<p *ngFor="let element of transactions.slice(0, transactions.length - 2)">{{element}}</p>

If you wanted to entirely reverse the order, you can

<p *ngFor="let element of transactions.slice().reverse()">{{element}}</p>
user_58426280

you can do this by css

<section class="container">
  <p *ngFor="let element of transactions">{{element}}</p>
</section>

.container {
  display: flex;
  flex-direction: column-reverse;
}
user_22794880
Related