Do different things in the same function depending on which html component called that function

Question

I am making a basic toggle app in angular.I have two toggle buttons.I am displaying a message in toggle.I want to call the same function on toggle change but do different things depending on which button was toggled.Is it possible or do I have to use two different functions? Thanks in advance for the help.

Here is my template code:

<mat-card class="card" fxLayout="column" fxLayoutAlign="center center" >
<form class="example-form" [formGroup]="formGroup" (ngSubmit)="onFormSubmit()" ngNativeValidate>

  <mat-action-list>
    <mat-list-item > <mat-slide-toggle       
      (change)="onChange($event);displayMessage($event)"   formControlName="Policy1" >
      <span class="label">{{message}}</span></mat-slide-toggle></mat-list-item> 
    <mat-list-item > <mat-slide-toggle  (change)="onChange($event)"  formControlName="Policy2">Policy2</mat-slide-toggle></mat-list-item>

  </mat-action-list>
  <p>Form Group Status: {{ formGroup.status}}</p>

  <button mat-raised-button [disabled]="disable" class="button" type="submit">Save Settings</button>

</form>
</mat-card>

The funtion that I'm calling from the toggle button:

  displayMessage(e){
    if(e.checked)
    {
      this.message = 'Toggled';
    }
      else
      this.message = 'Slide';

  }

Answer 1

The $event object from the (change) emitter has a srcElement that you can refer to when you want to find out which element caused the change.

If you want to retrieve the id of the element that called the function you do so with event.srcElement.id

Answer 2

You can pass more arguments to the handler:

<mat-slide-toggle *ngFor="let item of thingsToDo; let i = index"
   (change)= "onToggle($event, item.id, i)">

onToggle = (event, id, indexInArray) => { //...