Hello Devs,
In this tutorial, we are going to learn angular 10 click event 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.
app.component.html
<div class="container">
<h1>Call a Function on click Event in Angular 10 - Rathorji.in</h1>
<button (click)="clickFunction()" class="btn btn-success">Click Me</button>
<ul class="list-group" *ngFor="let post of posts">
<li class="list-group-item" (click)="callFunction($event, post)">
{{ post.title }}
</li>
</ul>
</div>app.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 10 Routing and Nested Routing Tutorial With Example'
},
{
id: 3,
title: 'How to Create Custom Validators in Angular 10?'
},
{
id: 4,
title: 'How to Create New Component in Angular 10?'
}
];
callFunction(event, post){
console.log(post);
}
clickFunction() {
alert("clicked me!");
}
}Output:
| {id: 2, title: "Angular 10 Routing and Nested Routing Tutorial With Example"} |
I hope this example helps you.