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

user_8725604 0
Viewed 69944

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?

angular
7 Answers

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.

user_77083440 
 <div class="top5" *ngFor="let feedback of topFeedbacks; index as i" >
      <ng-container>
        <div style="margin-left: 5%;">
              <span *ngIf="feedback && feedback.length < 80"><i class="fas fa-comment-dots"></i>&nbsp;&nbsp;{{feedback}}</span>
              <span *ngIf="feedback && feedback.length >= 80 && !expanded[i]"> <i class="fas fa-comment-dots"></i>&nbsp;&nbsp;{{feedback.substr(0, 75)}}</span>
              <span *ngIf="feedback && feedback.length >= 80 && expanded[i]"><i class="fas fa-comment-dots"></i>&nbsp;&nbsp;{{feedback.substr(0, feedback.length)}}</span> 
              <label>&nbsp;</label>
              <a  *ngIf="feedback && feedback.length >= 80" class="toggle-button" (click)="toggle(i)">{{expanded[i]?' ...Show less':' ...Show more'}}</a>
        </div>
    </ng-container>
</d
iv>
user_15240330

I found a fairly easy fix for this problem. In my example, i just use it to show, but a toggle or whatever is possible using the same method obviously.

I like this solution because it is all valid and all template :)

<ng-container>
    <div data-expand="false" #expandWrap>
        <span *ngIf="row.messageText && row.messageText.length >= 30 && expandWrap.dataset.show == 'false'">{{row.messageText.substr(0, 25)}}
            <span (click)="expandWrap.dataset.show = 'true'">more</span>
        </span>
        <span *ngIf="expandWrap.dataset.show == 'true'">{{row.messageText}}</span>
    </div>
</ng-container>

I made a small demo on stackblitz on how this works

user_64347470
Related