Questions tagged [mat-tab]
147 questions
0
votes
1 answer
How to override styles for two different mat-tab elements used in same page
I have two different mat-tab section used in same component in my angular application.
How to override styles of mat-tab because i need to apply two different styles for both the tabs.
Say, I need to have mat-label as white color in one mat-tab and …
Nancy
- 911
- 7
- 26
- 54
0
votes
1 answer
How to Put a Right-Click Context Menu on the Mat-tab-group component
I am trying to implement a context menu pop up with a right click from the user.
Here is an existing implementation with a mat-tab-list:
https://stackblitz.com/edit/angular-material-context-menu?file=app%2Fcontext-menu-example.html
I am trying to…
Miya
- 1
- 2
0
votes
1 answer
Change Placement of pagination in .mat-tab-group
I am trying to move the .mat-tab-header-pagination-after to next to the .mat-tab-header-pagination-before in a .mat-tab-group, the angular tab component. I am wondering how I am able to move the after pagination either in the html or css. Since it…
Miya
- 1
- 2
0
votes
1 answer
mat-tab component is lagging when data inside one tab is huge. How can we solve that?
I'm using mat-tab in angular 10, and the components are rendering dynamically using ComponentFactoryResolver and pushing components in array using this method.
for ex:…
Mukesh Soni
- 76
- 6
0
votes
2 answers
Angular Mat tabs : set default active tab based on label (get label index)
Is there any way to set default active tab by using labels or getting the index for that label before loading (active tab once the mat tab group initialise)
another thing i’m using ngIf for the container that holds the tabs so couldnt use view…
fatima
- 33
- 1
- 6
0
votes
1 answer
How to make mat-tab occupy entire available space
I have angular app where I am using mat-tabs, I need to make inner element to occupy the entire available space.
Tech Wizard
- 403
- 2
- 7
- 22
0
votes
2 answers
add tootip in mat-tab if using ng-container
I have issues to add tootip in mat-tab if I use ng-container.
Bigeyes
- 1,508
- 2
- 23
- 42
0
votes
1 answer
Strange behavior on mat-tab
I am facing a strange issue with Angular Material Tabs and hope someone can help me explain what is going on.
https://stackblitz.com/edit/angular-ivy-yttids
I have a mat-tab component with 3 tabs. My goal is to call an external service as soon as…
Engin Volkan
- 39
- 5
0
votes
1 answer
Convert horizontal tabs to vertical tabs using mat-tab
I am using mat-tab-group to display tabs horizontally. It looks ok on computer screen. But on mobile screen, it does not look very neat. Is there a way to convert it into vertical tab list if its mobile size screen?
…
user14463446
- 99
- 10
0
votes
1 answer
Response is coming but Request api call not triggered in network pannel with angular9
Request api generated via promise or observable sometimes response is coming but request api call not triggered in chrome network pannel. reponse also getting wrong
example:
this.getTimeCollections().then(data=>{console.log(data)});
//in…
Aurora
- 1
- 2
0
votes
1 answer
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. with Ngclass on mat-tab-group
So I would like to make the mat-ink-bar have different colors from the same mat-tab-group. I'm using local reference and NgClass.
The styles are working as expected, but in the console, it gives me this
ExpressionChangedAfterItHasBeenCheckedError:…
Onion
- 85
- 1
- 9
0
votes
2 answers
Angular mat-tab : content of only initial selected tab is loaded
I am using mat-tab to display diagrams.
Each diagram is created with a query selector :
buildDiagram (stepName : string){
let modeler = new Editor.default({
container : document.querySelector('#diagram-'+stepName)
});
In my…
Mahamane
- 11
- 1
- 6
0
votes
3 answers
Apply custom styles only the parent mat-tab-group
I want to apply some custom styles only to the parent mat-tab-group without effecting to the child mat-tab-groups. So, I tried to add a custom class only to the parent mat-tab-group but it doesn't work. Is there any way to achieve this?
A stackbitz…
user15084286
- 31
- 2
- 8
0
votes
1 answer
mat-tab transition triggers other animations in angular material table with expandable rows
I have a screen with mat-tab-group and one tab contains a table with expandable rows, those rows will be expanded only if click on it, but issue here is it will expand all rows automatically if we change the tab and come back . What is wrong here.…
PrathapG
- 751
- 1
- 7
- 21
0
votes
0 answers
How to enable pagination on vertically aligned Angular Material tabs (mat-tabs)?
I arranged my angular material tabs vertically using CSS. Unfortunately, the pagination to navigate to the invisible tabs is not displayed
My container has a fixed height (max-height: 177px) so that only a certain number of tabs are visible. The…
Codehan25
- 2,704
- 10
- 47
- 94