title: How to toggle (show/hide) element in Angular 4?
body: <p>This is my html element:</p>
  <pre><code>&lt;ng-container&gt;
      &lt;span *ngIf=&quot;row.messageText &amp;&amp; row.messageText.length &gt;= 30 &amp;&amp; expanded&quot;&gt;{{row.messageText.substr(0, 25)}}
          &lt;span&gt;more&lt;/span&gt;
      &lt;/span&gt;
  &lt;/ng-container&gt;
  </code></pre>
  <p>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 <em><code>row.messageText.substr()</code></em>) after clicking the <em>more</em> span. I think that there is a solution by using <em><code>(click)=&quot;toggle()&quot;</code></em> and setting some <em>true/false</em> values.</p>
  <p>Do you have any ideas?</p>