Nativescript Angular 2 - Show first 40 characters of label and show more on button click

Question

I want to have a typescript solution. There is a label with a lot of text and I want to show the first 40 characters. If the user clicks the "show more" button below the whole label should load and the "show more" label should change to "show less". After clicking "show less" it should reverse the function.

home.component.html

<label> 
    id="myLabel" 
    text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l">
</label>

<label id="showMore" text="Show more"></label>

Answer 1

In my Angular 7 project, Im using this approach. I hope it helps...

<div>
   <p *ngIf="!showMore">{{myText.slice(0,40)}}...</p>
   <p *ngIf="showMore">{{myText}}</p>
   <button (click)="showMore=!showMore">Click here to read {{showMore ? 'Less' : 'More'}}...</button>
</div>

As @Bass described in comments, I have a little update for my code,

<div>
   <p>{{showMore ? myText : myText.slice(0,40)}}...</p>
   <button (click)="showMore=!showMore">Click here to read {{showMore ? 'Less' : 'More'}}...</button>
</div>

Thank you.