question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tabs does not work when usage matTabContent and mat-tab-label

See original GitHub issue

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

image

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
totszwaicommented, Apr 2, 2019

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. ❤️

0reactions
angular-automatic-lock-bot[bot]commented, Jul 31, 2022

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.

Read more comments on GitHub >

github_iconTop 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 >
Mat Tabs Nested - StackBlitz
Tab group with asynchronously loading tab contents.
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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found