Clash Royale CLAN TAG#URR8PPP

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



4 Answers
4

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

(selectedTabChange)

Template:

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


Component:

import MatTabChangeEvent from '@angular/material';

// ...

onLinkClick(event: MatTabChangeEvent)
console.log('event => ', event);
console.log('index => ', event.index);
console.log('tab => ', event.tab);

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



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

@Output

md-tab

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:

md-tab-group

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

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




a will give the whole object
a.tab.textLabel will give the label value
and can be used a value when tab is clicked

Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).



Would you like to answer one of these unanswered questions instead?