How to call a function on click event in Angular2 ?

Last Updated : 28 Apr, 2025

A Function is a set of statements that takes input, does some specific computation, and produces output. An on click event occurs when the user clicks on an element. In this article, we will see How to call a function on click event in Angular2, along with understanding the basic implementation through the examples.

Setting the Angular Application

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Project Structure

It will look like the following:

z132

Example 1: In this example, we will call an API, and then iterate over the result, and display the data from the API in a card

HTML

<!-- app.component.html -->

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
</head>
<div style="width: 70%;">
    <h2 style="color: green">
          GeeksforGeeks
      </h2>
    <h2>
          How to call a function on 
        click event in Angular2 ?
      </h2>
    <button class="btn btn-primary" 
            (click)="display()">
          Call API
      </button>

    <div class="card">
        <div class="card-header">
            <b class="text-center">
                  Data Obtained from API below
              </b>
        </div>
        <div class="card-body">
            <div *ngFor="let item of gfg|keyvalue">
                {{item.value}}
            </div>
        </div>
    </div>
</div>

JavaScript

// app.component.ts
import { Component, OnInit } 
    from '@angular/core';
import { KeyValue } 
    from '@angular/common';
import { Pipe, PipeTransform } 
    from '@angular/core';
import { HttpClient } 
    from '@angular/common/http';
import { TmplAstHoverDeferredTrigger } 
    from '@angular/compiler';

@Component({
    selector: 'app-root',
    templateUrl: "./app.component.html",
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    gfg: any
    constructor(private http: HttpClient) { }
    display() {
        this.http.get('https://example.com').subscribe(
            (result) => {
                this.gfg = result
            }
        )
    }
}

JavaScript

// app.module.ts
import { NgModule } 
    from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { HttpClientModule }
    from '@angular/common/http';
import { AppComponent } 
    from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Recording-2023-10-27-at-025638

Example 2: In this example, we will fire an alert on click.

HTML

<!-- app.component.html -->

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet">
</head>
<div style="width: 70%;">
    <h2 style="color: green">
          GeeksforGeeks
      </h2>
    <h2>
          How to call a function on
          click event in Angular2 ?
      </h2>
    <button class="btn btn-primary" 
            (click)="fireAlert()">
          Fire Alert
      </button>
</div>

JavaScript

// app.component.ts
import { Component, OnInit }
    from '@angular/core';
import { KeyValue }
    from '@angular/common';
import { Pipe, PipeTransform }
    from '@angular/core';
import { HttpClient } 
    from '@angular/common/http';
import { TmplAstHoverDeferredTrigger }
    from '@angular/compiler';

@Component({
    selector: 'app-root',
    templateUrl: "./app.component.html",
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    gfg: any
    constructor(private http: HttpClient) { }
    fireAlert() {
        alert("Hi Geek! Please vote for this article for GPL 2023")
    }
}

JavaScript