Angular 7: EventEmitter does not work on click event

Question

I want to use a EventEmitter to open a new tab and ideally fill in the filter with the clicked reference.

So my project is set up as followed:

I have a invoice component which is basicly a table showing invoices. It is a expande table so when a line is clicked, it opens a detailled table with shipment information. In the .html file I've added the a click event on a reference of a shipment:

 <!-- Reference Column -->
      <ng-container matColumnDef="reference">
        <th mat-header-cell *matHeaderCellDef> Shipment </th>
        <td mat-cell *matCellDef="let expandedElement" (click)="applyShipmentFilter()"> {{expandedElement.reference}} </td>
      </ng-container>

This click event calls the following function in the invoice.ts file:

  applyShipmentFilter(){
console.log("INVOICE COMPONENT: Shipment is clicked w/ reference ");
this.click.emit();
}

So far so good, the console logs INVOICE COMPONENT: Shipment is clicked w/ reference .

When the reference is clicked, I want to make sure that the following function is called in the app.component.ts file:

  public goToOtherTab(){
    console.log("IN APP COMPONENT: tab changed");
    const tabCount = 4;
    this.selectedIndex = (2) % tabCount;
  }

So I added a eventEmitter in the invoice component:

@Output() click = new EventEmitter();

And added a click function in the app html file, which I expected to call the goToOtherTab function, but it does not:

 <mat-tab label="Shipment costs"> 
    <app-buyers-console-table (click)="goToOtherTab()"></app-buyers-console-table>
  </mat-tab>

Can someone explain to me why this is not working?

Answer 1

The problem turned out to be that I did not place the (shipmentClicked)="goToOtherTab($event)" in the right place to acces the event.

When you add a event in an event specific component, in this case the invoice.component.ts, you need to acces the event in the same place in the parent .html.

In my case I did not, first I've placed it like this:

<mat-tab-group *ngIf="loginService.isUserLoggedIn()" [(selectedIndex)]="selectedIndex">
  <mat-tab label="Invoices"> 
    <app-invoices></app-invoices>
  </mat-tab>
  <mat-tab label="Shipment costs"> 
    <app-buyers-console-table (shipmentClicked)="goToOtherTab($event)"></app-buyers-console-table>
  </mat-tab>
  <mat-tab label="Container costs">
    <app-single-container></app-single-container>
  </mat-tab>
  <mat-tab label="Ratecard">
    <app-ratecard-change></app-ratecard-change>
  </mat-tab>
</mat-tab-group>

This way the app.component can not acces the event. When I changed it to:

<mat-tab-group *ngIf="loginService.isUserLoggedIn()" [(selectedIndex)]="selectedIndex">
  <mat-tab label="Invoices"> 
    <app-invoices (shipmentClicked)="goToOtherTab($event)"></app-invoices>
  </mat-tab>
  <mat-tab label="Shipment costs"> 
    <app-buyers-console-table></app-buyers-console-table>
  </mat-tab>
  <mat-tab label="Container costs">
    <app-single-container></app-single-container>
  </mat-tab>
  <mat-tab label="Ratecard">
    <app-ratecard-change></app-ratecard-change>
  </mat-tab>
</mat-tab-group>

it works!