Call a Function on click Event in Angular 9/8

Call a Function on click Event in Angular 9/8

In this post we will give you information about Call a Function on click Event in Angular 9/8. Hear we will give you detail about Call a Function on click Event in Angular 9/8And how to use it also give you demo for it if it is necessary.

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:

Also see:How to Create Reusable Components in Angular 9/8?

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

Preview:

I hope it can help you…

Hope this code and post will helped you for implement Call a Function on click Event in Angular 9/8. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  73  =  81

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US