Components: [Tabs] Get label property of selected tab

[FiringBlanks]

Bug, feature request, or proposal:

Feature Request

What is the expected behavior?

To programmatically get the name of the currently selected tab

What is the current behavior?

It seems that (selectedTabChange) and md-on-select aren't executing the ts code for some reason. Even if they did, they would only return the current index #. I need the full value of the label property for what I'm working with.

What are the steps to reproduce?

<md-tab-group (selectedTabChange)="tabChanged($event)" style="margin-top:16px;">
      <md-tab label="{{ thing.name }}" *ngFor="let thing of things | async">

        <div class="ui basic segment">
          <table class="ui three column center aligned table">
            <thead>
              <tr>
                <th><div class="ui pink button">Item 1</div></th>
                <th><div class="ui pink button">Item 2</div></th>
                <th><button class="ui red button"><i class="pin icon"></i>Pinned</button></th>    
              </tr>
            </thead>
          </table>
        </div>

      </md-tab>
      <md-tab label="+ Add Thing"></md-tab>
    </md-tab-group>

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

In this example, I would add an item to the tabs list. Then when clicked, I would find the value of the selected tab's label property to see which tab is selected and therefore which information to load from my Firestore database. The path in my database that I need to load is given the same value as the label property of the tab, which makes it much easier to work with.

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

AngularFire2 v5
Angular Common v4.2.4
Material v2.0.0 beta.10
Typescript v2.3.3

Is there anything else we should know?

Platypus are from the same family as Echidnas.

[HashSix]

I'm using Material v2.0.0 beta.12 and on selectedTabChange event I pass through $event and access the label text via $event.tab.textLabel

[FiringBlanks]

You're using selectedTabChange in the directive, right? Here's my code, and it's still not working:

Template

<md-tab-group selectedTabChange="tabChanged($event)" style="margin-top:16px;">
        <md-tab label="{{ item.name }}" *ngFor="let item of items| async">
            ...
        </md-tab>
        <md-tab label="Another Thing">
            ...
        </md-tab>
</md-tab-group>

TS

tabChanged(event) {
    console.log('Clicked: ' + event.tab.textLabel);
}

[HashSix]

you need to wrap the selectedTabChangein parentheses like so (selectedTabChange)="tabChanged($event)"

[FiringBlanks]

It's still not working. Here's my new code:

Template

<md-tab-group (selectedTabChange)="tabChanged($event)" style="margin-top:16px;">
    <md-tab label="{{ item.name }}" *ngFor="let item of items | async">
        ...
    </md-tab>
    <md-tab label="+"></md-tab>
</md-tab-group>

TS

tabChanged(event) {
    console.log('Clicked: ' + event.tab.textLabel);
}

---

Update

I decided to update my Material and Angular CDK versions and I'm now getting this error when I try to run ng serve (see below) and I have red squiggly lines in my app.module.ts under each of these modules that I'm importing from angular/material.

app.module.ts
import { MaterialModule, MdIconModule, MdTabsModule, MdInputModule, MdTableModule, MdDialogModule, MdCardModule, MdButtonModule, MdNativeDateModule, MdToolbarModule, MdSnackBarModule, MdAutocompleteModule } from '@angular/material';

Terminal

ERROR in C:/Program Files/Git/projects/ang-material/src/app/app.module.ts (14,10): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MaterialModule'.
ERROR in C:/Program Files/Git/projects/ang-material/src/app/dialog-submit-assignment/dialog-submit-assignment.component.ts (2,10): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MdDialogRef'.
ERROR in C:/Program Files/Git/projects/ang-material/src/app/teacher-page/teacher-page.component.ts (5,10): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MdDialog'.
ERROR in C:/Program Files/Git/projects/ang-material/src/app/teacher-page/teacher-page.component.ts (5,20): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MdSnackBar'.
ERROR in C:/Program Files/Git/projects/ang-material/src/app/toolbar/toolbar.component.ts (3,10): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MdDialog'.
ERROR in C:/Program Files/Git/projects/ang-material/src/app/dialog-add-school/dialog-add-school.component.ts (1,10): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MdSnackBar'.
ERROR in C:/Program Files/Git/projects/ang-material/src/app/dialog-add-school/dialog-add-school.component.ts (1,22): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MdDialog'.
ERROR in C:/Program Files/Git/projects/ang-material/src/app/search-school/search-school.component.ts (3,10): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MdDialog'.
ERROR in C:/Program Files/Git/projects/ang-material/src/app/dialog-add-teacher/dialog-add-teacher.component.ts (2,10): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MdSnackBar'.
ERROR in C:/Program Files/Git/projects/ang-material/src/app/dialog-add-teacher/dialog-add-teacher.component.ts (2,22): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MdDialog'.
ERROR in C:/Program Files/Git/projects/ang-material/src/app/browse-teachers/browse-teachers.component.ts (4,10): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MdDialog'.
ERROR in C:/Program Files/Git/projects/ang-material/src/app/class-options-pane/class-options-pane.component.ts (2,9): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MdSnackBar'.
ERROR in C:/Program Files/Git/projects/ang-material/src/app/classwork/classwork.component.ts (2,10): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MdDialog'.
ERROR in C:/Program Files/Git/projects/ang-material/src/app/app.module.ts (14,26): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MdIconModule'.
ERROR in C:/Program Files/Git/projects/ang-material/src/app/app.module.ts (14,40): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MdTabsModule'.
ERROR in C:/Program Files/Git/projects/ang-material/src/app/app.module.ts (14,54): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MdInputModule'.
ERROR in C:/Program Files/Git/projects/ang-material/src/app/app.module.ts (14,69): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MdTableModule'.
ERROR in C:/Program Files/Git/projects/ang-material/src/app/app.module.ts (14,84): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MdDialogModule'.
ERROR in C:/Program Files/Git/projects/ang-material/src/app/app.module.ts (14,100): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MdCardModule'.
ERROR in C:/Program Files/Git/projects/ang-material/src/app/app.module.ts (14,114): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MdButtonModule'.
ERROR in C:/Program Files/Git/projects/ang-material/src/app/app.module.ts (14,130): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MdNativeDateModule'.
ERROR in C:/Program Files/Git/projects/ang-material/src/app/app.module.ts (14,150): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MdToolbarModule'.
ERROR in C:/Program Files/Git/projects/ang-material/src/app/app.module.ts (14,167): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MdSnackBarModule'.
ERROR in C:/Program Files/Git/projects/ang-material/src/app/app.module.ts (14,185): Module '"C:/Program Files/Git/projects/ang-material/node_modules/@angular/material/material"' has no exported member 'MdAutocompleteModule'.
ERROR in Error: MaterialModule is not an NgModule
at _getNgModuleMetadata (C:\Program Files\Git\projects\ang-materialnode_modules\@angular\compiler-cli\src\ngtools_impl.js:140:15)
at _extractLazyRoutesFromStaticModule (C:\Program Files\Git\projects\ang-materialnode_modules\@angular\compiler-cli\src\ngtools_impl.js:109:26)
at C:\Program Files\Git\projects\ang-materialnode_modules\@angular\compiler-cli\src\ngtools_impl.js:129:27
at Array.reduce ()
at _extractLazyRoutesFromStaticModule (C:\Program Files\Git\projects\ang-materialnode_modules\@angular\compiler-cli\src\ngtools_impl.js:128:10)
at Object.listLazyRoutesOfModule (C:\Program Files\Git\projects\ang-materialnode_modules\@angular\compiler-cli\src\ngtools_impl.js:53:22)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\Program Files\Git\projects\ang-materialnode_modules\@angular\compiler-cli\src\ngtools_api.js:91:39)
at AotPlugin._getLazyRoutesFromNgtools (C:\Program Files\Git\projects\ang-materialnode_modules\@ngtools\webpack\src\plugin.js:207:44)
at _donePromise.Promise.resolve.then.then.then.then.then (C:\Program Files\Git\projects\ang-materialnode_modules\@ngtools\webpack\src\plugin.js:443:24)
at
at process._tickCallback (internal/process/next_tick.js:188:7)

webpack: Failed to compile.

[HashSix]

Material has changed their tags from Md to Mat in beta12, you'll have to go through your project and change all your modules from the @angular/material lib.

[FiringBlanks]

So for my app.module.ts file, does this look right?

Old:

import { MaterialModule, MdIconModule, MdTabsModule, MdInputModule, MdTableModule, MdDialogModule, MdCardModule, MdButtonModule, MdNativeDateModule, MdToolbarModule, MdSnackBarModule, MdAutocompleteModule } from '@angular/material';

New:

import { MaterialModule, MatIconModule, MatTabsModule, MatInputModule, MatTableModule, MatDialogModule, MatCardModule, MatButtonModule, MatNativeDateModule, MatToolbarModule, MatSnackBarModule, MatAutocompleteModule } from '@angular/material';

[HashSix]

Yes, now you'll need to change the html selectors as well from md to mat, for example <md-card> to <mat-card>

[FiringBlanks]

Do the new mat- modules behave the same exact way as the old md- modules? I just want to make sure that I don't have to change anything else in my code, just the names.

I'm still getting a red squiggly under the first import (MaterialModule). Are we still importing that?

[HashSix]

Mostly yes unless the Material team have added new features, one thing I picked up on is that the <mat-select> has to be wrapped in a <mat-form-field> like this:

<mat-form-field>
  <mat-select placeholder="State">
    <mat-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</mat-option>
  </mat-select>
</mat-form-field>

Otherwise it won't render properly.

You can find all the documentation at https://material.angular.io

[FiringBlanks]

Whew. I did battle today. I changed all the md- to mat-. I manually imported all the other modules. I'm wrung out. But it works! And your solution along with it. An update to Angular Material and CDK (both now at v2.0.0 beta12) were all that were needed!

Thank you.

[HashSix]

Anytime, always happy to help a fellow developer :D happy its working now.

[FiringBlanks]

The selectedTabChange property only fires when a tab is _changed_. That's good, but Is there a way of getting the name of the tab that is set when the mat-tab-group is first initialized?

I tried setting @ViewChild('tabGroup') tabGroup and running the ngAfterViewInit() function below but that only gets me the _index_ of the tab set on initialization (which is always 0). I need the actual label again.

ngAfterViewInit() {
    console.log('afterViewInit => ', this.tabGroup.selectedIndex); 
  }

[ovidiua2003]

for anyone still using old material version with md instead of mat, the name of the output is not "selectedTabChange" but it's "selectChange"

so the tab group would look like
<md-tab-group (selectChange)="checkChange($event)">

[ATakaSKY]

@FiringBlanks
Found the solution. You can do:this.tabGroup._tabs.first.textLabel on the tabGroup instance from ViewChild.

[FiringBlanks]

@ATakaSKY This fixes my problem. 👍

Here's my full solution:

HTML

<mat-tab-group (selectedTabChange)="tabChanged($event)" #tabGroup>
        <mat-tab label="{{ item.name }}" *ngFor="let item of items | async">
                       ...
         </mat-tab>
</mat-tab-group>

TypeScript

@ViewChild('tabGroup') tabGroup: MatTabGroup;

tabChanged(event) {
    console.log('Selected tab label: ' + this.tabGroup._tabs.first.textLabel);
  }

Thank you 😂👊

[vedhaperi]

This may be a workaround. Refer to Stackblitz that I created:

https://stackblitz.com/edit/angular-mat-tab-selected-label-value?file=src/app/app.component.html

Open the stackblitz app in a new window and press F12. Change the tab and see the name of the selected tab being printed to console.

Unfortunately the label of the first tab isn't printed unless we change to another tab and come back to the first. If anyone is able to fix that, please add your answer to this.

.html

<mat-tab-group  (selectedTabChange)="selectedTabValue($event)">
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

.ts - a method

selectedTabValue(event){
    console.log(event);
    this.labelName = event.tab.textLabel;
    console.log(this.labelName)
  }

[webia1]

if you use i18n (that is always the case in an enterprise web application) the tab.textLabel: will be always empty, because it is not translated yet (it will go through the pipe first). Which means, we need a proper solution. (Reference: https://github.com/angular/components/issues/11858)

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}