CODEWITHSUNDEEP
javascriptangulartypescript
Azhar Khan
Azhar Khan

Reputation: 1524

Call a function on click event in Angular 2

How to declare a function inside a component (typescript) and call it on a click event in Angular 2? Following is the code for the same functionality in Angular 1 for which I require Angular 2 code:

<button ng-click="myFunc()"></button>

//controller

app.controller('myCtrl', ['$scope', function($cope) {
    $scope.myFunc= {
        console.log("function called");
    };
}]);

Upvotes: 135

Views: 654605

Answers (5)

Amrit Jain
Amrit Jain

Reputation: 137

This worked for me: :)

<button (click)="updatePendingApprovals(''+pendingApproval.personId, ''+pendingApproval.personId)">Approve</button>

updatePendingApprovals(planId: string, participantId: string) : void {
  alert('PlanId:' + planId + '    ParticipantId:' + participantId);
}

Upvotes: 7

Numan
Numan

Reputation: 3948

The line in your controller code, which reads $scope.myFunc={ should be $scope.myFunc = function() { the function() part is important to indicate, it is a function!

The updated controller code would be 

app.controller('myCtrl',['$scope',function($cope){
    $scope.myFunc = function() {
    console.log("function called");
  };
}]);

Upvotes: 4

Alireza
Alireza

Reputation: 104900

Exact transfer to Angular2+ is as below:

<button (click)="myFunc()"></button>

also in your component file:

import { Component, OnInit } from "@angular/core";

@Component({
  templateUrl:"button.html" //this is the component which has the above button html
})

export class App implements OnInit{
  constructor(){}

  ngOnInit(){

  }

  myFunc(){
    console.log("function called");
  }
}

Upvotes: 79

sebaferreras
sebaferreras

Reputation: 44669

Component code:

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

@Component({
  templateUrl:"home.html"
})
export class HomePage {

  public items: Array<string>;

  constructor() {
    this.items = ["item1", "item2", "item3"]
  }

  public open(event, item) {
    alert('Open ' + item);
  }

}

View:

<ion-header>
  <ion-navbar primary>
    <ion-title>
      <span>My App</span>
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of items" (click)="open($event, item)">
      {{ item }}
    </ion-item>
  </ion-list>
</ion-content>

As you can see in the code, I'm declaring the click handler like this (click)="open($event, item)" and sending both the event and the item (declared in the *ngFor) to the open() method (declared in the component code).

If you just want to show the item and you don't need to get info from the event, you can just do (click)="open(item)" and modify the open method like this public open(item) { ... }

Upvotes: 155

Zasypin N.V.
Zasypin N.V.

Reputation: 234

https://angular.io/guide/user-input - there's a simple example .

Upvotes: 10

Related Questions