CODEWITHSUNDEEP
angulartypescript
Sachin GA
Sachin GA

Reputation: 41

Bind different Event method to button click for a list of button

I am using angular 4 have buttons in html.

patientCallStatusList = [{
  id: "1",
  label: "CALL CONNECTED",
  event: "notConnected"
}, {
  id: "2",
  label: "CALL NOT CONNECTED",
  event: "notConnected"
}, {
  id: "3",
  label: "PATIENT CALL BACK",
  event: "notConnected"
}];
<button *ngFor="let item of patientCallStatusList" mat-raised-button class="patientstatusButton" (click)="onButonClick(item)">{{item.label}}</button>

I have to bind the event to click action of button so it will redirect to perticular method.How can i do it please help me.

Upvotes: 0

Views: 468

Answers (3)

SAMUEL
SAMUEL

Reputation: 8552

If i understand you correctly following will help 

import {
  Component
} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private patientCallStatusList = [{
    id: "1",
    label: "CALL CONNECTED",
    event: "notConnected",
    clickFunction: (id) => {
      console.log(id);
    }
  }, {
    id: "2",
    label: "CALL NOT CONNECTED",
    event: "notConnected",
    clickFunction: (id) => {
      console.log(id);
    }
  }, {
    id: "3",
    label: "PATIENT CALL BACK",
    event: "notConnected",
    clickFunction: (id) => {
      console.log(id);
    }
  }];
}
<button *ngFor="let item of patientCallStatusList" mat-raised-button class="patientstatusButton" (click)="item['clickFunction'](item.id)">{{item.label}}</button>

https://stackblitz.com/edit/angular-by81aj

Upvotes: 0

Chris W.
Chris W.

Reputation: 23280

On your button you already pass the whole item as a param via (click)="onButonClick(item)"

Could just switch based on a value and avoid changing the arr.obj (pseudo);

onButtonClick = (item) => {

   switch(item.id) {
     case 1:
        function1(item);
        break;
     case 2:
     case 3:
     case 4:
        function2(item);
        break;
     default:
        somethingElse(item);  
   }

}

Upvotes: 0

Assaf Tenenvurzell
Assaf Tenenvurzell

Reputation: 96

what about add this method to each obj at the array, and then pass it to the function of the click button? e.g - 

  patientCallStatusList = [{
  id: "1",
  label: "CALL CONNECTED",
  event: "notConnected",
  itemFunction: ()=>{console.log(id)
    }, {
  id: "2",
  label: "CALL NOT CONNECTED",
  event: "notConnected",
  itemFunction: ()=>{console.log(id)
  }, {
  id: "3",
  label: "PATIENT CALL BACK",
  event: "notConnected",
  itemFunction: ()=>{console.log(id)
  }]; 

     and at the button =>
     <button (click)="someFunction(item.itemFunction)"></button>

Upvotes: 1

Related Questions