title: Is there a way how angular material table will stay expanded ? (with tr and td, not mat-row tag)
body: <p>I am trying to setup angular material table with extendable rows so after clicking on a row it stay extended, it does not collapse after clicking on other row, only if clicking on itself - <a href="https://stackblitz.com/angular/ygdrrokyvkv?file=app%2Ftable-expandable-rows-example.html" rel="nofollow noreferrer">https://stackblitz.com/angular/ygdrrokyvkv?file=app%2Ftable-expandable-rows-example.html</a></p>
  
  <p>I have been looking for solution, but found only for the older approach without   but the material table. I need <a href="https://stackblitz.com/angular/ygdrrokyvkv?file=app%2Ftable-expandable-rows-example.html" rel="nofollow noreferrer">https://stackblitz.com/angular/ygdrrokyvkv?file=app%2Ftable-expandable-rows-example.html</a> exactly this one to be able to have expanded multiple rows</p>
  
  <p>I can not find nice solution how to make an array from expandedDetail and show it accordingly ?</p>
  
  <pre><code>&lt;tr mat-header-row *matHeaderRowDef="columnsToDisplay"&gt;&lt;/tr&gt;
   &lt;tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
       class="example-element-row"
       [class.example-expanded-row]="expandedElement === element"
       (click)="expandedElement = element"&gt;
   &lt;/tr&gt;
   &lt;tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I expect the table with expandable rows to stay expanded until user doesn't click on the row itself one more time</p>