components
components copied to clipboard
angular
[Tabs] Allow users to assign IDs to tabs
Bug, feature request, or proposal:
proposal
What is the expected behavior?
Let the user define some "id" for the tab, to identify, outside the tab container, which tab is currently selected. Please note that this id may not necessarily be a substitute to the "selectedIndex" property, but some aditional content to identify which tab is currently selected.
What is the current behavior?
Today we can only know which tab is selected using the selectedIndex of md-tab-group, which is not really safe as the content of the tab may be changed and the index changes within it
What are the steps to reproduce?
What is the use-case or motivation for changing an existing behavior?
This is linked to #4135. The "workaround" that I found to use a "fixed" content relative to the current selected tab is to render the fixed element outside the tab-group and use the selectedIndex to show it.
Which versions of Angular, Material, OS, browsers are affected?
2.0.0-beta.3
This would be great to have that because if you protect your tab with ngIf the index is not always the Same.
The id property should be provided in the current available events.
@finalxcode I am not saying it is a great solution but I have been programmatically selecting based on index.
We need this because we have cases where some tabs are hidden with *ngIf, so the index is not reliable.
e2e testing is a nightmare because of this. I feel like I'm better off not using material components.
This issue is already 3 years old. Common guys, just make it happen already...
Would be nice indeed to be able to add some, for example, data-testid attributes to the DOM
Yeah, we need to be able to add some sort of attributes here, just ran into this now...
Letting developers set an id for tab would be great.
IMHO, it should be an id, not some data-tabid or other custom attribute, as it might not fit all use cases. And "rewriting the default AM id" practice exists already for other components (like select).
In our case, for Tag Manager triggers, having an id on a mat-tab would be ideal.
While a bit hacky, the label property of mat tab can be used as ID that can be accessed in the MatTabChangeEvent as event.tab.textLabel
The actual visible label can be set using ng-template with mat-tab-label directive.
While a bit hacky, the label property of mat tab can be used as ID that can be accessed in the MatTabChangeEvent as event.tab.textLabel
The actual visible label can be set using ng-template with mat-tab-label directive.
Thanks for the tip, this works fine Just adding the sample:
component.html
<!-- label are used to identify tab in component.ts, actual text is overwritten by mat-tab-label -->
<mat-tab class="tab-content" [label]="'search'">
<ng-template mat-tab-label>
My Tab Label
</ng-template>
</mat-tab>
component.ts
tabChange(tabChange: MatTabChangeEvent): void {
/* IF tab is search
* We are forced to filter on textLabel because index is not reliable
* (it changes if user does not have access to other tabs for example) */
if (tabChange?.tab?.textLabel === 'search') {
<!-- label are used to identify tab in component.ts, actual text is overwritten by mat-tab-label --> <mat-tab class="tab-content" [label]="'search'"> <ng-template mat-tab-label> My Tab Label </ng-template> </mat-tab>
@bmtheo I used this for a while thank you, but it seems to be broken with ng15. I tinkered for an hour, but didn't really get anywhere.
It's 2023 and there is still no answer for this that won't break on version updates?
I was able to get the attribute 'aria-label' to give to mat-tab. I had to use this attr like id.
[aria-label]="childSection.id"
Then i got element from document with query selector.
Hello, this issue just landed on my radar and before I go ahead and rush into implementing this I wanted to get a better idea of what the desired use case is. For example, if the id is only were only for testing purposes (I'm aware it's not) I'd recommend using component harnesses which would provide a much better experience
Stackblitz examples of what is trying to be accomplished would also be very much appreciated! It would give me something tangible to really test against
The most obvious use case is probably to be able to link to a specific tab, say, using a URI #fragment. (Or various similar cases, e.g. storing the tab ID in localstorage and being able to recreate the UI when the user returns).
Back when i commented in 2017 (when i commented). Here was my use-case:
I had data ... that on selection based on an attribute in the data i wanted to default to different tabs.
For example record one might go to the first tab, record two might go to the third tab, and the third to the second.
As i stated I needed up using indexes to control this.
This logic fell short when i started using dynamic tabs and could not guarantee the indexes.
I did make functions that could look at the current tabs and translated it to the correct index (but seemed like a lot of overhead).
Since a lot of time has passed i have started tying my tabs to routes, so i can use active route. This does allow for a more dynamic loading.
But still would be nice if no routing was used to be able to dynamically select the tab based on a key and not an index.
Literally need this at my job. I am working on a change for this and pushing a PR soon enough.
Edit (6/6/2023):
After looking at the source code:
- https://github.com/angular/components/blob/main/src/material/tabs/tab-group.ts#L441
- https://github.com/angular/components/blob/main/src/material/tabs/tab-group.html#L14
it seems like setting the id of the tab was not exposed on purpose in order to ensure uniqueness when multiple tab group instances are rendered on any given page. Although that makes complete sense, i do think there should be override options at the user's/developer's risk.
I'm working on a PR in case there is still a need for it.
I've got a solution on how to add the IDs programmatically, use inspection mode to see the IDs set
Hope someone finds this useful
- https://stackblitz.com/edit/kingsbury-angular-w-material-c8jswn?file=src%2Fapp%2Fcustomers%2Fcustomers.component.ts
Dear Angular team, please provide a solution for this. It'a huge issue for using dynamic tabs - requiring strange workarounds or making it even impossible to use material tabs. Please fix!
