CODEWITHSUNDEEP
htmlcssarraysangulartypescript
Kshitij Domadia
Kshitij Domadia

Reputation: 23

Displaying new items in a list on top

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-->

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.

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.

Upvotes: 1

Views: 402

Answers (2)

Jonathan Hamel
Jonathan Hamel

Reputation: 1393

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>

Upvotes: 1

Reza
Reza

Reputation: 19863

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;
}

Upvotes: 0

Related Questions