angular / angular/components

Feature Request : Mat-Tab select by name.

Open
#11,858 9 comments 19 reactions 0 assignees View on GitHub
area: material/tabs feature P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Bug, feature request, or proposal:
Feature Request for material tabs

#### What is the expected behavior?
The ability to select a tab by its name, like this;

``

``

#### What is the current behavior?
``

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

I am using the material tabs in a responsive app. When the app is in mobile size I display 5 tabs, when the app is in desktop size I display 3 tabs. The reason is since there is more room on the desktop I combine the content and show less tabs.

The issue is when I try to link to a specific tab via a URL. I would use a query parameter like ?tabindex=2. However since my tab index changes depending on the application size, the link will work in one case and not the other. So it would be useful to link to the tab by name like this, ?tab=profile. This way I can pass the name to the component and it can figure out the active tab regardless of the index number.

Contributor guide

Open the contributing guide

Research direction

Start at the mat-tab-group and mat-tab entry points described in the issue, and review how selectedIndex currently controls the active tab. Define how a name-based selection API should behave when tabs are shown or combined responsively, then verify that a URL such as ?tab=profile selects the intended tab independently of its index.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.