Angular Materials Table expand and collapse table cell?

Question

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

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.

If the user clicks on the ellipses then it will expand that particular cell Only showing all of the data for that cell.

For example I can have a row that looks like this

   Name      Address          Zip
   Jon      123 Main         44444
   Sam      4444 Chatt...    65984
   Amy      777 Main         44444

They would click on the address cell for Sam and it would show

       Name      Address                        Zip
       Jon      123 Main                       44444
       Sam      4444 Chattanooga Street  ...   65984
                Apartment 105
       Amy      777 Main                       44444

Is that possible in Materials Table?

<td mat-cell *matCellDef="let element" [hidden]="column.Hidden" (mouseenter)="_mouseEnter($event, element, column.MouseEnter)" (mouseleave)="_mouseLeave($event, element, column.MouseLeave)" class="{{column.Classes}}">

             <div *ngSwitchCase="CellType.TextArea" class="text-center">
                <app-textarea [(text)]="element[column.Value]" [title]="column.Title"></app-textarea>
              </div>
  </td>

Answer 1

You can make a cell expand like this using pure html css. You can embel this css into your Angular and give it a try.

I've made first cell expandable, rest you can copy and redo. Add content class to an y children of <td>

If you want to do it on click, just add an eventlistner which updates your classes.

  <td mat-cell *matCellDef="let element" [hidden]="column.Hidden" 
  (mouseenter)="_mouseEnter($event, element, column.MouseEnter)" 
  (mouseleave)="_mouseLeave($event, element, column.MouseLeave)" class=" 
  {{column.Classes}}">

      <div *ngSwitchCase="CellType.TextArea" class="text-center content"> //added class
                <app-textarea [(text)]="element[column.Value]" [title]="column.Title"> 
                </app-textarea>
      </div>


  </td>

body,table{
    font-family:verdana,arial,sans-serif;
    font-size:12px;
    border-collapse:collapse;
}

td,th{
    padding:3px 3px;
    margin:0px;
    border:1px solid #BBB;
    white-space:nowrap;
}

.content{
    height:15px;
    width:100px;
    overflow:hidden;
    text-overflow:ellipsis
}
.content:hover{
    height:auto;
    width:auto;

}

<table>

<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>

<tr>
<td><div class="content"><span class="hidden">Data1,1 first line - this is a kind-of long line
<br/>Data1,1 second line - this is a kind-of long line too
<br/>Data1,1 third line
<br/>Data1,1 fourth line</span>
</div>
</td>
<td>Data2,1</td>
<td>Data3,1</td>
</tr>

<tr>
<td>Data1,2</td>
<td>Data2,2</td>
<td>Data3,2</td>
</tr>

<tr>
<td>Data1,3</td>
<td>Data2,3</td>
<td>Data3,3</td>
</tr>

</table>