Show "show more" dynamically - html

Question

I have created a forum-like page where all messages are as follows (simplified):
<div class="message-wrapper" *ngFor="let node of allNodes">
<div [class]="isExpanded(node.id) ? 'message-content expanded' : 'message-content'">
<div class="content" [innerHtml]="node.comment"></div>
<span (click)="toggleExpand(node.id)" class="showMore">{{ isExpanded(node.id) ? 'Show less' : 'Show more' }}</span>
</div>
</div>
And the css
.message-content {
overflow-y: hidden;
.content {
line-height: 1.5vh;
max-height: 6vh;
overflow-y: hidden;
}
}
.message-content.expanded {
max-height: 10000000vh;
overflow: visible !important;
.content {
overflow: visible;
max-height: 100000000vh;
}
}
And when clicking the 'Show more' and 'Show less' span, the div.content expands as expected.
The problem I'm currently encountering is that I want to show the 'Show more' only when the text is actually overflowing.
I know I can find this out by subtracting the scrollHeight and innerHeight but for this to work, I need to have the correct (unique) nativeElement of the corresponding div.comment in my controller.
So my question:
How can I show the 'Show more' span, when the div.content is overflowing while all Messages on the page have the same classes etc.?
The thing that makes this question unique from existing questions is that I don't have a single element but I have multiple of the same elements (multiple messages) thus needing the unique node element.

Answer 1

Created a workaround where I'd add a dynamic id to all divs and spans. Then I loop through all nodes and check if the text is overflowing. If it is I set hidden=false to the label.
for(let comment of this.allComments) {
//element which contains the comment content
let content = document.getElementById('div'+comment.id);
// if the element height is bigger than the displayed height (with an error margin of 10)
if(content.scrollHeight - content.clientHeight > 10) {
// the corresponding 'show more' label
let label = document.getElementById('label'+comment.id);
label.hidden = false;
}
}