Cannot use mat-tab in an attribute selector

2
votes

I try to put the two tabs into two separate components like the following:

<mat-tab-group animationDuration="0ms">
    <mat-tab app-tab [label]="'blabla1'" [data]="aaaData"></mat-tab>
    <mat-tab app-tab [label]="'blabla2'" [data]="bbbData"></mat-tab>
</mat-tab-group>

...

@Component({
    selector: 'mat-tab[app-tab]',
    templateUrl: './tab.component.html',
    styleUrls: ['./tab.component.scss']
})
export class TabComponent {
    @Input() label: string;
    @Input() data: any;

and in module.ts:

import {MatTabsModule} from '@angular/material';
@NgModule({
    imports: [
        MatTabsModule,

And I get the error:

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 ("

Or, if I use a mat-tab-link instead of mat-tab, and a[mat-tab-link][app-tab] instead of mat-tab[app-tab], I will get the

Uncaught Error: Template parse errors: Can't bind to 'data' since it isn't a known property of 'a'. ("mat-tab-group animationDuration="0ms">

and it doesn't support the label property either:

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">

2
angularangular-materialangular-directive
Have you tried to change your selector to selector: '[app-tab]'? – julianobrasil
After reading your question again, I think it's not possible at all. mat-tab selector is already associated with another component and the two definitions (material's and yours) will conflict. The best you can do is create another component and put inside mat-tab. Maybe you can work with ng-template's in some way. – julianobrasil

2 Answers

0
votes

I would place another element within the mat-tab to avoid messing with Material's component selectors.

So more like:

<mat-tab-group animationDuration="0ms">
    <mat-tab label="blabla1">
        <tab-component [data]="aaaData"></tab-component>
    </mat-tab>
    <mat-tab label="blabla2">
        <tab-component [data]="bbbData"></tab-component>
    </mat-tab>
</mat-tab-group>

@Component({
    selector: 'tab-component',
    templateUrl: './tab.component.html',
    styleUrls: ['./tab.component.scss']
})
export class TabComponent {
    @Input() data: any;
0
votes

You are getting the 

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 ("

because you are declaring a mat-tab selector compoment in your project which cannot be done becaouse the same name component is already present.

You can rename the selector of component in the tab component from

mat-tab[app-tab] to app-tab

then you can use it in the mat-tab like this 

<mat-tab>
   <app-tab [label]="'blabla2'" [data]="bbbData"></app-tab>
</mat-tab>

The error are because the label and data are not the attributes of the mat-tab.

Use your component separately in the mat tab component