How to toggle (show/hide) element in Angular 4?

Question

This is my html element:

<ng-container>
    <span *ngIf="row.messageText && row.messageText.length >= 30 && expanded">{{row.messageText.substr(0, 25)}}
        <span>more</span>
    </span>
</ng-container>

It shows part of a message when row.messageText.length is greater than 30. I need the first span to show the entire message (by using row.messageText.substr()) after clicking the more span. I think that there is a solution by using (click)="toggle()" and setting some true/false values.

Do you have any ideas?

Answer 1

In TS file

showMyContainer: boolean = false;

In HTML

<button (click)="showMyContainer=!showMyContainer">Show/Hide</button>

<div *ngIf="showMyContainer">
     your code
</div>

See my stackblitz

Happy to hear if someone got helped.

Answer 2

<ng-container>
    <span *ngIf="row.messageText && row.messageText.length >= 30 && expanded == false">{{row.messageText.substr(0, 25)}}
        <span (click)="expanded = true">more</span>
    </span>
<span *ngIf="expanded == true">{{row.messageText}}</span>
</ng-container>

and set expanded = false initially in your ts file