title: Cannot use mat-tab in an attribute selector
body: <p>I try to put the two tabs into two separate components like the following:</p>
  
  <pre><code>&lt;mat-tab-group animationDuration="0ms"&gt;
      &lt;mat-tab app-tab [label]="'blabla1'" [data]="aaaData"&gt;&lt;/mat-tab&gt;
      &lt;mat-tab app-tab [label]="'blabla2'" [data]="bbbData"&gt;&lt;/mat-tab&gt;
  &lt;/mat-tab-group&gt;
  </code></pre>
  
  <p>...</p>
  
  <pre><code>@Component({
      selector: 'mat-tab[app-tab]',
      templateUrl: './tab.component.html',
      styleUrls: ['./tab.component.scss']
  })
  export class TabComponent {
      @Input() label: string;
      @Input() data: any;
  </code></pre>
  
  <p>and in module.ts:</p>
  
  <pre><code>import {MatTabsModule} from '@angular/material';
  @NgModule({
      imports: [
          MatTabsModule,
  </code></pre>
  
  <p>And I get the error:</p>
  
  <blockquote>
    <p>Uncaught Error: Template parse errors:
    More than one component matched on this element.
    Make sure that only one component's selector can match a given element.
    Conflicting components: MatTab,TabComponent ("</p>
  </blockquote>
  
  <p>Or, if I use <code>a mat-tab-link</code> instead of <code>mat-tab</code>, and <code>a[mat-tab-link][app-tab]</code> instead of <code>mat-tab[app-tab]</code>, I will get the</p>
  
  <blockquote>
    <p>Uncaught Error: Template parse errors:
    Can't bind to 'data' since it isn't a known property of 'a'. ("mat-tab-group animationDuration="0ms"></p>
  </blockquote>
  
  <p>and it doesn't support the <code>label</code> property either:</p>
  
  <blockquote>
    <p>Uncaught Error: Template parse errors:
    Can't bind to 'label' since it isn't a known property of 'a'. ("s="tabs-wrap">][label]="'blabla1'" [data]="aaaData"></p>
  </blockquote>