title: Adding expansion panel to the row inside angular material table
body: <p>I am trying to add an expansion panel(may be a new component) something similar to the mat-accordion to show the detailed view inside a mat-table row on click. I have attached a plunker to demonstrate the requirement.
   <a href="http://plnkr.co/edit/mBGT3D1JV5rXXRiEwCAc?p=info" rel="noreferrer">http://plnkr.co/edit/mBGT3D1JV5rXXRiEwCAc?p=info</a>   </p>
  
  <p>This is the demo angular material table that I am trying to add the expanded column to and I have added plunker on the html data table
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;mat-table #table [dataSource]="dataSource"&gt;
  
    &lt;!-- Position Column --&gt;
    &lt;ng-container matColumnDef="position"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; No. &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let element"&gt; {{element.position}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
  
    &lt;!-- Name Column --&gt;
    &lt;ng-container matColumnDef="name"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; Name &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let element"&gt; {{element.name}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Weight Column --&gt;
    &lt;ng-container matColumnDef="weight"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; Weight &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let element"&gt; {{element.weight}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Symbol Column --&gt;
    &lt;ng-container matColumnDef="symbol"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; Symbol &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let element"&gt; {{element.symbol}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
    &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
  &lt;/mat-table&gt;</code></pre>
  </div>
  </div>
  </p>