I am working with dynamic components, where the data being shown in the template is unknown and will vary from case to case. I have some nested mat-expansion-panels, where there is a need to display a text field for notes that have previously been stored in each expansion panel being loaded.

Since the length of the text is unknown, I want to limit the displayed note to one line, and mark that text have been overflowed with an ellipsis - followed by a "Show more" / "Show less" button. I have the show more/less functionality working, but I only want this button to be visible if the text exceeds one line, and be hidden if the note i.e., only contains three words.

I have seen JQuery often being used to accomplish around similar issues, but being that I'm using Angular, JQuery is not a suitable fit.

Template:

<div class="note-field">
   <span class="note">Note: </span>
   <span class="note-text" [class.show]="show">{{ data.note }}</span>
</div>
<button class="show-button" (click)="show = !show">{{ show ? 'Show less': 'Show more' }}</button>

Component:

show: boolean = false;

CSS:

.note-text {
   font-size: 14px;
   line-height: 14px;
   height: 14px;
   overflow: hidden;
   text-overflow: ellipsis;
}

.show {
   overflow: visible;
   text-overflow: none;
   height: auto;
}

I've been looking at this for some days now, and one of the fixes that I unsuccessfully tried was adding the following CSS specification:

.show-button[overflow=visible] {
   display: none;
}

The ellipsis also stopped working after implementing the overflow functionality.

I know it is somewhat specific, but I really need the functionality to hide and show this only if the data being loaded is over the specified limit.