CODEWITHSUNDEEP
angularangular-materialangular-directive
azenyem
azenyem

Reputation: 56

Cannot use mat-tab in an attribute selector

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

Upvotes: 3

Views: 3162

Answers (2)

Hitech Hitesh
Hitech Hitesh

Reputation: 1635

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

Upvotes: 0

Jack Siman
Jack Siman

Reputation: 36

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;

Upvotes: 0

Related Questions