Angular 2 How to "watch" for tab changes

Question

I have:

<md-tab-group color="primary">
  <md-tab label="Проэкты">
    <h1>Some tab content</h1>
  </md-tab>
  <md-tab label="Обучалка">
    <h1>Some more tab content</h1>
    <p>...</p>
  </md-tab>
</md-tab-group>

I need to catch an event when a specific tab is clicked and call this function inside my component:

onLinkClick() {
  this.router.navigate(['contacts']); 
}

Martin

It seems like there is no tabChanging event to indicate the tab has just been clicked - to allow you to prepare for the change. This really ought to be a feature request :-) Like a 'tabGuard' similar to a lightweight route guard. – Jenette

Answer 1

You could use the (selectedTabChange) event. Check Material2#tabs.

Template:

<mat-tab-group color="primary" (selectedTabChange)="onLinkClick($event)">
  ...
</mat-tab-group>

Component:

import { MatTabChangeEvent } from '@angular/material';

// ...

onLinkClick(event: MatTabChangeEvent) {
  console.log({ event });

  this.router.navigate(['contacts']); 
}

Wareroom

That's good, but with navigation tab, whitout <mat-tab-group> it's not working. There have event to get this event when we use directive mat-tab-nav-bar on nav element ? – Levona

import { MatTabChangeEvent } from '@angular/material/tabs'; is the correct import as per the latest Angular Material modules – Rankle

Answer 2

You need to publish the event as an @Output from you md-tab component. Something like:

import { EventEmitter, Output, Input, Component } from '@angular/core';

@Component({
    selector: 'tab',
    template: `
        <button (click)="clicked()">{{ name }}</button>
    `,
    styles: [`
    `]
})
export class TabComponent {
    @Input() name = 'replaceme';
    @Output() tabClicked = new EventEmitter<null>();

    clicked() {
        this.tabClicked.emit();
    }
}

Then you consume that event in the md-tab-group, something like this:

import { Component }          from '@angular/core';

@Component({
    selector: 'tab-group',
    template: `
        <!--<tab *ngFor="let tab of tabs" [name]="tab"></tab>-->
        <tab *ngFor="let tab of tabs" [name]="tab" (tabClicked)="tabChanged(tab)"></tab>
        <div>
        {{ selectedTab }}
        </div>
    `,
    styles: [`
    `]
})
export class TabGroupComponent {
    private tabs = ['foo', 'bar'];
    private selectedTab = this.tabs[0];

    onInit() {
        this.selectedTab = this.tabs[0];
    }

    tabChanged(tab) {
        this.selectedTab = tab;
    }
}

Heres a working plunker that demonstrates the concept

Garmaise

Answer 3

it can be done easily as follows

 <md-tab-group color="primary" (click)="selectedTabIndex=tabRef.selectedIndex" #tabRef>
      <md-tab label="Проэкты">
        <h1>Some tab content</h1>
      </md-tab>
      <md-tab label="Обучалка">
        <h1>Some more tab content</h1>
        <p>...</p>
      </md-tab>
    </md-tab-group>

only thing to do is defining a global variable in your component.

 export class MyComponent implements OnInit{   
 selectedTabIndex=0;
     ngOnInit(){
         // 
       }
    }

Rizas

Answer 4

Documentation says, that the content of the you tab is not injected into the DOM until the tab is activated. So, you may catch DOM events on you components with @HostListener annotation:

<md-tab-group color="primary">
  <md-tab label="Проэкты">
    <my-cool-tab1></my-cool-tab1>
  </md-tab>
  ...
</md-tab-group>

Component:

@Component({selector: 'my-cool-tab1', ...})
export class MyCoolTab1Component {

  @HostListener('DOMNodeInsertedIntoDocument')
  foo() {
    console.log('Tab activated');
  }

  @HostListener('DOMNodeRemovedFromDocument')
  foo2() {
    console.log('Tab deactivated');
  }
}

update: this not works in FF %(

Steamy

Answer 5

You can use ngKeypress ( Angular Documentation here) into any HTML tag. For example:

<anyHtmlTag ng-keypress="yourFunction($event)">  

yourFunction(evt){
   if(evt.code === "Tab"){
      //Do your stuff
   }
}

Claraclarabella

This question is about Angular, not AngularJs. – Wareroom