Questions tagged [mat-tab]
147 questions
31
votes
7 answers
How to use mat-tab? mat-tab is not a known element error
I am trying to use mat-tab. I have added the below code in html
Nancy
- 911
- 7
- 26
- 54
16
votes
2 answers
Mat-tab material angular6 selectedIndex doesn't work with *ngFor
I display several tabs with a loop ngFor using Angular Material tabs.
This works properly however now I would like to open the second tab when initialised and not the first tab.
Therefore, I add the property selectedIndex in the mat-tab-group but it…
PierBJX
- 2,093
- 5
- 19
- 50
13
votes
3 answers
Mat-tab-body-wrapper, cannot edit css (angular)
I can't change the mat tab body wrapper which seems to be limiting the size of my mat-tab.
ex.
.mat-tab-body-wrapper {
height: 100%:
}
Sorry, Stackoverflow is is forcing me to comment out some unnecessary stuff as you can see with NG-template…
Chris22311
- 213
- 1
- 3
- 11
9
votes
2 answers
Make sticky header on mat-tab-group
I'm using mat-tab-group and I want the tab headers to be fixed when I scroll down to the content. So, I fixed the height of tab content. I'm able to scroll through the content with fixed header. But, then I see two scroll bars on the page which is…
Eranki
- 750
- 1
- 11
- 30
8
votes
1 answer
add notification badges to a mat-tab
I am trying to add notification badge to a mat-tab
similar to the image below ,
notification badge on top right of the tab
But I can't seem to find a way to do it on angular material tabs. Since the badges are being cut.
Here is a stackblitz…
sonu
- 81
- 1
- 3
8
votes
2 answers
Material design data table layout with static data
How can I use the material design data table layout without a datasource (static data)? I can find no example for this use case on https://material.angular.io/components/table/examples. For example I tried the following without success.
…
surfspider
- 727
- 3
- 11
- 25
7
votes
2 answers
How to show material tab content only if is active?
I trying to show tab content only if is selected:
…
yantrab
- 2,482
- 4
- 31
- 52
6
votes
1 answer
How to prevent changing MatTab until confirmation?
I want to hold, the changing of MatTab until a confirmation is given. I have used MatDialog for confirmation. The issue is, before clicking "Yes", the the tab is already changed.
For example, From income tab, I click adjustment tab. And before…
MuthuKani K
- 73
- 1
- 6
6
votes
1 answer
Set active tab for angular `mat-tab-nav-bar`
I have the following not working code (found in some incomplete example):
6
votes
4 answers
Is it possible to disable mat-tab animations with pure css
I want to disable the Angular Material mat-tab animation (the animation that occurs as the content slides into place). I know it is possible to use the [@.disabled] attribute but I wonder if it is possible to achieve the same effect with pure…
cfr
- 135
- 1
- 1
- 9
6
votes
1 answer
Angular Material Tab : Prevent tab change of mat-tab-group if the form in current tab is dirty
I was trying to prevent tab change of mat-tab, if the form in currently active tab is dirty.
But I couldn't find a way to intercept the tab change event.
// Tab 0 Content
jophab
- 5,356
- 14
- 41
- 60
6
votes
2 answers
How can I focus on an specific mat-tab
…
Ivan Bucks
- 71
- 1
- 1
- 3
6
votes
3 answers
Angular Material - Know exactly which tab was selected
So I might have missed something obvious in the docs, but I'm simply looking for an easy way to find which tab has been selected in the following scenario:
View
Jeto
- 14,596
- 2
- 32
- 46
6
votes
4 answers
Cannot position items sticky inside mat-tabs
I'm trying to position my image sticky with
position: -webkit-sticky;
position: sticky;
top: 1px;
however cannot achieve it.
HTML:
K.Rice
- 599
- 1
- 8
- 27
5
votes
2 answers
add a close button to mat-tab-label in angular-material 15
Hello I'm writing an angular 15 application with angular material.
I use the new mat-tab (not the legacy) component to create tabs in my page, and i want in the tab title to have a close button.
so in the component i created removeTab…
ufk
- 30,912
- 70
- 235
- 386