title: Extending MatRowDef
body: <p>I want to display some custom component/html between two rows on click. I believe the quick and easy solution would be to use the event from the click handler and manipulate the DOM directly however I'd like to do it <em>the angular way</em> if possible.</p>
  
  <p>For inspiration I first looked at <a href="https://medium.com/@jsayol/having-fun-with-angular-extending-ngfor-to-support-for-in-f30c724967ed" rel="nofollow noreferrer">this article</a> on extending structural directive. It was of limited use though since <code>*matRowDef</code> isn't supposed to be used on its own, but in conjunction with other elements as part of the material table. I then went to have a look at the <a href="https://github.com/angular/material2/blob/master/src/lib/table/row.ts#L39" rel="nofollow noreferrer">source code</a> directly and tried to mimic the way <code>MatRowDef</code> extended <code>CdkRowDef</code> and ended up with this:
  </p>
  
  <pre class="lang-ts prettyprint-override"><code>@Directive({
    selector: '[expandableRowDef]',
    providers: [
      {provide: MatRowDef, useExisting: ExpandableRowDirective},
      {provide: CdkRowDef, useExisting: ExpandableRowDirective}
    ],
    inputs: ['columns: expandableRowDefColumns', 'when: expandableRowDefWhen']
  })
  export class ExpandableRowDirective&lt;T&gt; extends MatRowDef&lt;T&gt; {
    constructor(template: TemplateRef&lt;any&gt;,
                viewContainer: ViewContainerRef,
                _differs: IterableDiffers) {
                  super(template, _differs);
                }
  }
  </code></pre>
  
  <p>I then simply switched <code>*matRowDef="..."</code> with <code>*expandableRowDef="..."</code>, it compiles fine and doesn't fail at runtime.</p>
  
  <p>Where should I take it from here to edit the DOM inside the created <code>mat-row</code> element?</p>