ItSolutionStuff.com

Call a Function on click Event in Angular 9/8

By Hardik Savani • October 20, 2023
Angular

This article will provide example of how to call component function on button click event in angular 9/8 application. i want to show you angular 9/8 button click event and call a function example. it's very simple example of click event call function angular 9/8.

If you are new and very beginner with angular 9/8 application and if you are looking for simple example of button click event and call a component function then i will help you using bellow example.

In this example, we will create two functions, one is very simple and without any argument call clickFunction() and another we will call dynamic argument with jquery object call callFunction($event, post). one function will call alert and another will only print on console.

Let's see both example with output as bellow:

aap.component.html

<h1>Call a Function on click Event in Angular 8 - ItSolutionStuff.com</h1>

<button (click)="clickFunction()">Click Me</button>

<div *ngFor="let post of posts">

<button (click)="callFunction($event, post)">{{ post.title }}</button>

</div>

aap.component.ts

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'appNgContent';

posts = [

{

id: 1,

title: 'Angular Http Post Request Example'

},

{

id: 2,

title: 'Angular 8 Routing and Nested Routing Tutorial With Example'

},

{

id: 3,

title: 'How to Create Custom Validators in Angular 8?'

},

{

id: 4,

title: 'How to Create New Component in Angular 8?'

}

];

callFunction(event, post){

console.log(post);

}

clickFunction() {

alert("clicked me!");

}

}

Output:

{id: 2, title: "Angular 8 Routing and Nested Routing Tutorial With Example"}

Preview:

I hope it can help you...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

How to Create Service in Angular 8 using cli?

Read Now →

Angular 9/8 HttpClient for Sending Http Request Example

Read Now →

Angular 9/8 Routing and Nested Routing Tutorial With Example

Read Now →

How to Create Custom Validators in Angular 9/8?

Read Now →

How to Create New Component in Angular 8?

Read Now →

Angular NgClass - How to Add Dynamic Class in Angular 10/9/8?

Read Now →

Reactive Form with Validation in Angular 8

Read Now →

How to Add Bootstrap in Angular 8 | Install Bootstrap 4 in Angular 8

Read Now →

How to Create Custom Pipe in Angular 9/8?

Read Now →

How to Set Style Dynamically in Angular 8?

Read Now →