CODEWITHSUNDEEP
angularangular-material2
user4676340
user4676340

Reputation:

Angular 2 : send event to child on tab change

I am using Angular material tabs and what I want to do is that when I click on a tab, I send an event to the child of this tab.

My HTML looks like this

<md-tab-group *ngIf="me">
  <md-tab label="Gallery" i18n-label="@@gallery">
    <app-gallery [user]="me"></app-gallery>
  </md-tab>
  <md-tab label="Profile" i18n-label="@@profile">
    <app-profile [user]="me"></app-profile>
  </md-tab>
</md-tab-group>

The tabs already have the change event implemented. The problem is that I can handle the event on my main component, but not in my gallery component. Is there a way to transmit the event to the gallery component, without using a service just for that ?

Thnank you in advance.

Upvotes: 2

Views: 1622

Answers (1)

eko
eko

Reputation: 40647

You can call the child components(gallery in this case) methods from the parent by giving the child a selector in the template

<md-tab-group *ngIf="me">
  <md-tab label="Gallery" i18n-label="@@gallery">
    <app-gallery #galleryEl [user]="me"></app-gallery> //<--- add the html selector here
  </md-tab>
  <md-tab label="Profile" i18n-label="@@profile">
    <app-profile [user]="me"></app-profile>
  </md-tab>
</md-tab-group>

Parent.ts:

@ViewChild('galleryEl') galleryEl ;

and then you can use this field to call methods of this component.

this.galleryEl.someEventMethod(theEvent);

Upvotes: 3

Related Questions