Questions tagged [mat-tab]
147 questions
0
votes
1 answer
Mat tab last child - only affect one group and not all other groups in component?
I ran into this example when looking to solve an issue with making the last tab move to the right of the group - which is what I need.
Here's an example: StackBlitz
I've tried adding a class and trying the following... but I can't get the style to…
reecemcg
- 28
- 4
0
votes
1 answer
selectedIndex not working with multiple mat-tab-group
I have multiple mat-tab-group into a single HTML page like :
...
Nathan Cheval
- 773
- 2
- 7
- 32
0
votes
1 answer
How to implement angular material tabs with side buttons instead of tab header?
Here is what I have - Tabs with header
And here is what I want - Tabs with side buttons
This is my code -
.html -
Abhinav
- 75
- 1
- 9
0
votes
2 answers
Angular material tag group has no inkbar when the tab group is in an other tab group
I have multiple tabs on my website and the main tab group does not have any issues at all. However, when I place an other tab group within on the tabs, the ink bar is only displayed when one of the tabs is clicked.
Here are is a picture of my…
Matthieu Raynaud de Fitte
- 2,001
- 3
- 25
- 49
0
votes
2 answers
Angular 10 `routerLink` in` mat-tab` does not work
I'm using Angular 10. In the CoreModule class I have the component NavbarComponent. I have this HTML template in the NavbarComponent component:
Home
609tom
- 297
- 1
- 3
- 14
0
votes
1 answer
How can I keep a mat-tab active when I navigate to a subchild of its route in Angular?
I am using mat-tab-nav-bar to show 2 tabs as listed below:
tabs.component.html:
0
votes
0 answers
Mat-tab-group angular component tab toggling tab on its own
I have a user report that when they constantly switch between tabs while data is still being loading (separate API calls per tab) the tabs will start switching on it own and the user must refresh the page to regain…
Anthony R
- 89
- 1
- 10
0
votes
1 answer
Dynamically load components inside *ngFor in Angular 9
I studied the code available on angular.io, and I replicated it in my scenario with a mat-tab-group. However, I would like to be able to use the ad-host directive inside a *ngFor. I tried it, and the directive is always undefined.
I searched here…
Michael
- 876
- 9
- 29
0
votes
1 answer
load function in mat-tab when selected - Angular 2 material using mat-tab-group
How can I add action to mat-tab when selected ?
In my case i want to set laodCard=true when the card is selected.
here is the code i wrote, but action (click) does not work
Aymen TAGHLISSIA
- 1,675
- 13
- 30
0
votes
1 answer
Based on the mat tab click Mat expand collapse should display
I am working currently Mat tabs (vertical) in one component & Mat expand collapse in other component based on the click of mat tab the relevant Mat expand should display.
Here is the Stackblitz which I am working on.
Mr.M
- 1,472
- 3
- 29
- 76
0
votes
1 answer
two tabs vertical & horizontal - Not working Mat tabs
I was able to create vertical material tab with my below code but I want is inside vertical tab i need an horizontal tab
When I tried using below code both showing in vertical tabs Here is my code and here is my Stackblitz url.
Mr.M
- 1,472
- 3
- 29
- 76
0
votes
1 answer
Mat-tab-group's [(selectedIndex)]=... binding is flaky
I am using Angular and the MaterialTabs module.
I have a list of tabs in my component that I display using mat-tabs and ngFor, plus one more disabled tab with a plus button. When clicking the plus button, I would like to add a new tab and…
nemkin
- 95
- 2
- 9
0
votes
0 answers
Register an event on resizing
When a Component is placed in a non selected Material Tab, it's in a disconnected DOM state, and its dimensions are 0. When the tab is selected, it is added to the DOM, and gets a real dimension. I need to intercept this event from inside the added…
f.khantsis
- 3,256
- 5
- 50
- 67
0
votes
1 answer
Mat-Tab Background Color affecting the child tab
I'm using Angular 8 and Angular Material Tab
I create a Tab within a Tab, my code looks something like this :
…
alramdein
- 810
- 2
- 12
- 26
0
votes
1 answer
How to change mat-tab after routeParams changed?
I'm trying to reset mat-tab-group to set first tab as active when routeParams changed.
ts file:
public index = 0;
ngOnInit() {
this.subscription = this.route.params.subscribe((routeParams: Params) => {
// some code
this.index = 0;
…
Rychagov
- 21
- 5