Stack Overflow
Stack Overflow

Questions tagged [mat-tab]

147 questions
5
votes
1 answer

Angular Material Tabs Wrapper - Adding new tab doesn't reflect in UI

I'm trying to create a wrapper around MatTabs that exposes all the properties of the MatTabs and Came across this question : Angular Material Tabs not working with wrapper component . I added other tabs properties and events to it. The events seems…
kal93
  • 522
  • 1
  • 9
  • 22
5
votes
2 answers

How to conditionally prevent user from navigating to other tab in mat-tab-group

I have an angular component which uses an angular material tab group. …
Lahiru Chandima
  • 22,324
  • 22
  • 103
  • 179
5
votes
0 answers

mat-tab-group tabs not rendering after switching parent tabs

I have an example where I need to use nested tabs and tables. https://stackblitz.com/edit/angular-bgl1f2 When I switch parent tabs (View M2) and then try to switch child tabs (M3), the tabs do not render. Rendering occurs only after switching child…
MajorXbox
  • 503
  • 1
  • 4
  • 13
4
votes
1 answer

smooth swiping between tabs in angular

How can I implement smooth swiping between tabs in angular? I am using mat-tabs (angular material tabs) and want to add tab-swiping support for touch devices (like WhatsApp or Telegram for mobile). resources I found provide the tabs parent element…
Joshua
  • 109
  • 2
  • 6
4
votes
0 answers

How to add mat-tab pagination to a horizontal mat-list

Can anyone suggest a good way to implement the pagination functionality you see above, found in on a horizontal . I don't need to use , I just figured this was the most obvious container.
HGPB
  • 4,346
  • 8
  • 50
  • 86
4
votes
3 answers

Set no tab as default active tab on mat tab

I have search functionality implemented using mat-tab, I need no tab selected on initial load. Tab should get active only when user clicks on specific tab. Currently, first tab is active on load. I have tried setting selectedIndex="null" but didn't…
User3250
  • 2,961
  • 5
  • 29
  • 61
4
votes
2 answers

Angular Material mat tab inside tab and main first tab name not change

I used my project for Angular material taband i used mat tab inside tab , my issue is main tab first tab and sub tab 1st tab label name not change ,I used different label name but not changed. you can clearly understand it please look working stack…
core114
  • 5,155
  • 16
  • 92
  • 189
4
votes
1 answer

Components are not being destroyed after closing a mat-tab when building a mat-tab-group from an array

I have a dataset which has an array of panels containing information about the component that should be loaded in a mat-tab-group. The tabs in the mat-tab-group can be closed. For that, I change the data structure that we use to build the tab-group.…
Scuba Kay
  • 2,004
  • 3
  • 26
  • 48
3
votes
1 answer

mat-tab inside mat-menu sometimes dot not display content correctly

I am using angular 15.0.4 When puting a mat-tab inside a mat-menu, I sometimes observe a strange behavior: the content of the mat-tab is not displayed.
Victor
  • 486
  • 3
  • 8
3
votes
2 answers

How to disable mat-tab-group mat-ink-bar animation

I wan to disable a selection animation I set animationDuration and disableRipple but it still animated
…
Sergino
  • 10,128
  • 30
  • 98
  • 159
3
votes
2 answers

Angular Material mat-tabs all have different heights

I wish to have all the tabs have the same height, no matter what contents are inside. The tabs reside inside a div. Preferably I don't need to set a fixed height for this div, but instead the div should have the height of the mat-tab that has the…
Onion
  • 85
  • 1
  • 9
3
votes
1 answer

Enable mat-tab scroll without arrows

I am willing to reproduce tabs scrollable with a finger on mobile like Google page: But with mat-tab (Material Design & Angular), I have two arrows displaying: I managed to remove the arrows with disablePagination = true, however scrolling with…
LoWay
  • 61
  • 1
  • 5
3
votes
1 answer

Angular animations don't work inside mat-tabs after switching back

I'm trying to get a simple :enter/:leave animation to work on a mat-list inside a mat-tab. The initial animation is no problem, the problem occurs when switching to a different tab and returning to the first one. That time the animation doesn't get…
Olafvv
  • 87
  • 12
3
votes
1 answer

Angular MatTabChangeEvent does not trigger on page load

I am making use of (selectedChange)="functionName($event)" to get index of my active tab. However on page load i cannot triggger this event as it only gets triggered after i change the tab atleast once to get a returned object of MatTabChangeEvent…
Ehsan Nissar
  • 643
  • 2
  • 13
  • 35
3
votes
2 answers

Angular CDK drag drop with mat tab group vertical

So i created mat tab group that currently only work for tabs, but sub -tabs have problem that i will show you in gif. Only 1, 2 sub tab can't be drag and dropped on them all other cases are…
cvekaso
  • 833
  • 1
  • 11
  • 28
1
2
3
…
9 10