Tabs does not work when usage matTabContent and mat-tab-label
See original GitHub issueWhat is the expected behavior?
<mat-tab-group>
<mat-tab>
<ng-template matTabContent>
<ng-template mat-tab-label>First</ng-template>
Content 1
</ng-template>
</mat-tab>
<mat-tab>
<ng-template matTabContent>
<ng-template mat-tab-label>Second</ng-template>
Content 2
</ng-template>
</mat-tab>
<mat-tab>
<ng-template matTabContent>
<ng-template mat-tab-label>Third</ng-template>
Content 3
</ng-template>
</mat-tab>
</mat-tab-group>
https://stackblitz.com/edit/angular-mat-custom-label?file=app/tab-group-basic-example.html
What is the current behavior?
<mat-tab-group>
<mat-tab label="First">
<ng-template matTabContent>
Content 1
</ng-template>
</mat-tab>
<mat-tab label="Second">
<ng-template matTabContent>
Content 2
</ng-template>
</mat-tab>
<mat-tab label="Third">
<ng-template matTabContent>
Content 3
</ng-template>
</mat-tab>
</mat-tab-group>
Issue Analytics
- State:
- Created 5 years ago
- Reactions:3
- Comments:9 (5 by maintainers)
Top Results From Across the Web
Why angular material tabs recreate component - Stack Overflow
When you use <ng-template matTabContent> you load tabs content in lazy way. Remove them in order to use eager load of all tabs:...
Read more >Tabs - Angular Material
MatTabLabel extends CdkPortal. Used to flag tab labels for use with the portal directive. Selector: [mat-tab-label] ...
Read more >Tab Component - Codeible
Inside the ng-template element, define your custom label. For example, we can use an icon. <ng-template mat-tab-label>. <mat-icon>thumb_up</mat-icon>.
Read more >Angular Material Tab Label - ConcretePage.com
Using mat-tab-label Attribute. The mat-tab-label is the selector of MatTabLabel directive. Find the code to use it.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
label should never be part of the content. as of right now there is no way to customize both or lazy load the content unless you are forced to use regular label. please raise the priority if possible. ❤️
This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.