Add uniqueName to MatTab in Tabs

[IgorWolbers]

Feature request

Add uniqueName to mat-tab in Tabs

What is the expected behavior?

• Add the ability to specify a uniqueName per mat-tab in Tabs as an Input() or programmatically using MatTab
• Add the uniqueName property to MatTab anywhere this is accessible including MatTabChangeEvent.tab.uniqueName for all @Output events that are of type EventEmitter<MatTabChangeEvent>

What is the current behavior?

This is currently not available.

What are the steps to reproduce?

Nothing to reproduce, not currently available.

What is the use-case or motivation for changing an existing behavior?

The only way to see which tab was activated/changed in a handler for selectedTabChange is to use the event tab's index. If the developer wants to execute a specific action per activated tab like preloading data (as one example) the system must be able to identify exactly which tab was selected. This can be cumbersome for multiple reasons.

• If tabs are dynamically hidden from view using *ngIf conditions the tab's index assignments shift making it difficult to know which tab was activated unless the event handler also checks all the conditions.
• If the UI changes and the tabs are re-ordered (as a part of a design change) the event handler must also be updated so that any logic based on selected tab is also updated to reflect the new UI order.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular CLI: 7.0.3
Node: 10.13.0
OS: win32 x64
Angular: 7.0.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        7.0.3
@angular/cdk                      7.0.2
@angular/cli                      7.0.3
@angular/material                 7.0.2
@ngtools/webpack                  6.0.8
@schematics/angular               7.0.3
@schematics/update                0.10.3
rxjs                              6.3.3
typescript                        3.1.3
webpack                           4.8.3

Is there anything else we should know?

I might have forgotten an additional point of where you can set or read back the value. I wrote this based on the documentation, please use your own judgment and add it in any necessary additional locations if deemed appropriate.

[Jeto143]

Yes, this is most needed (though I might also have missed a way to do this). This Stack Overflow post was recently made to showcase a very basic example (and includes a StackBlitz if that's useful).

I've added two workarounds in the above SO post (which I can paste here if needed). Both of them seem a bit hacky though (though the ng-template one a bit less so).

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.