Cannot use mat-tab in an attribute selector

Question

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

Have you tried to change your selector to `selector: '[app-tab]'`? — julianobrasil, Apr 07 '20 at 19:27
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, Apr 07 '20 at 19:43

Hitech Hitesh · Answer 1 · 2020-04-08T02:30:18.697

0

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

edited Apr 08 '20 at 02:30

answered Apr 07 '20 at 19:12

Hitech Hitesh

1,641
1
9
18

Then why does this example https://stackoverflow.com/questions/46671235/remove-host-component-tag-from-html-in-angular-4 work? – azenyem Apr 07 '20 at 20:48
here the tr tag is the default browser tag and not the component. Here the mat-tab is defined component in angular material which you cannot define it again. – Hitech Hitesh Apr 08 '20 at 02:36

score 0 · Answer 2 · answered Apr 07 '20 at 19:17

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;

Cannot use mat-tab in an attribute selector

2 Answers2