CODEWITHSUNDEEP
angularangular-material2
Igor Tikhonenko
Igor Tikhonenko

Reputation: 363

Angular 2 How to "watch" for tab changes

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']); 
}

Upvotes: 32

Views: 62324

Answers (5)

Javid Gahramanov
Javid Gahramanov

Reputation: 112

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(){
         // 
       }
    }

Upvotes: -1

developer033
developer033

Reputation: 24874

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']); 
}

Upvotes: 86

chabapok
chabapok

Reputation: 952

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 %(

Upvotes: -2

heronsanches
heronsanches

Reputation: 596

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
   }
}

Upvotes: -3

Lucas
Lucas

Reputation: 14949

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

Upvotes: 0

Related Questions