Reputation: 56
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
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
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