title: Angular Materials Table expand and collapse table cell?
body: <p>I have a mat table and a current row click event already. I need to be able to have an collapsible table cell depending on the amount of data in the cell. In the case below its a text-area </p>
  
  <p>If a cell has a length of over 30 then it needs to show the first 30 characters and an Ellipses .... like the example posted below.</p>
  
  <p>If the user clicks on the ellipses then it will expand that particular cell Only showing all of the data for that cell.</p>
  
  <p>For example I can have a row that looks like this</p>
  
  <pre><code>   Name      Address          Zip
     Jon      123 Main         44444
     Sam      4444 Chatt...    65984
     Amy      777 Main         44444
  </code></pre>
  
  <p>They would click on the address cell for Sam and it would show</p>
  
  <pre><code>       Name      Address                        Zip
         Jon      123 Main                       44444
         Sam      4444 Chattanooga Street  ...   65984
                  Apartment 105
         Amy      777 Main                       44444
  </code></pre>
  
  <p>Is that possible in Materials Table?</p>
  
  <pre><code>&lt;td mat-cell *matCellDef="let element" [hidden]="column.Hidden" (mouseenter)="_mouseEnter($event, element, column.MouseEnter)" (mouseleave)="_mouseLeave($event, element, column.MouseLeave)" class="{{column.Classes}}"&gt;
  
               &lt;div *ngSwitchCase="CellType.TextArea" class="text-center"&gt;
                  &lt;app-textarea [(text)]="element[column.Value]" [title]="column.Title"&gt;&lt;/app-textarea&gt;
                &lt;/div&gt;
    &lt;/td&gt;
  </code></pre>