Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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']); 
}
like image 678
Igor Tikhonenko Avatar asked Feb 06 '17 01:02

Igor Tikhonenko


1 Answers

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']);  } 
like image 127
developer033 Avatar answered Sep 27 '22 18:09

developer033