Typically, when utilizing ngFor, the most recent item is displayed underneath the initial element.
For instance, a list containing: [Apple, Orange, Banana]
If we use ngFor to display this list:
- Apple
- Orange
- Banana
I am interested in learning a method to reverse the order and showcase the very last element (or any newly added elements that appear at the top while the older ones are automatically shifted below). For example:
- 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;
}
I would appreciate suggestions for a CSS attribute that causes the oldest elements below the overflown list to gradually fade away and only become visible when scrolling down.