In my application, I have a collection of words that are displayed or hidden using *ngFor based on their 'hidden' property.
You can view the example on Plunker.
The issue arises when the word list becomes extensive, making it challenging to identify newly added words. To address this problem, I want to implement a highlighting feature for new items.
My approach was to assign a default '.highlight' class and remove it once an item is added with a smooth transition effect:
HTML
<div
*ngFor="let item of words | shownWords"
[ngClass]="{'item':true, 'highlihted': item.hidden}">
{{item.value}}
</div>
CSS
.item {
background-color: #ffffff;
transition: background .3s ease-out;
-moz-transition: background .3s ease-out;
-webkit-transition: background .3s ease-out;
-o-transition: background .3s ease-out;
}
.item.highlihted {
background-color: #ea90aa;
}
However, the above method does not work as the new item is created without the '.highlight' class.
Thus, my question is: Is there a way to detect when a new item is added and specifically identify which item it is? Is this even achievable, or is there an alternative solution?
P.S. Please let me know if I provided an incorrect Plunker link or any other issues in my question.
Solution
Apologies for missing information earlier, but I also intend to remove the highlight after a certain period.
Refer to @Boyan Kostadinov's answer first and then come back for the final solution and final Plunker:
New method toggleHidden():
toggleHidden(item: Word) {
item.hidden = !item.hidden;
if (!item.hidden) {
item.highlihted = true;
setTimeout(() => {
item.highlihted = false;
}, 500);
}
}