in this article, i will let you know angular 8 call component function on click event example. i will give you simple example of angular 8 click event on button.
If you are new and very beginner with angular 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.
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"}
I hope it can help you...
Do you like below Tutorials ?
- Angular Json Pipe Example | Json Pipe in Angular 9/8/7
- Angular Slice Pipe Example | Slice Pipe in Angular 9/8/7
- Angular Uppercase Pipe Example | Uppercase Pipe in Angular 9/8/7
- Angular LowerCase Pipe Example | LowerCase Pipe in Angular 9/8/7
- Angular Titlecase Pipe Example | Titlecase Pipe in Angular 9/8/7
- Angular KeyValue Pipe Example | KeyValue Pipe in Angular 9/8/7
- Call Method from One Component to Another Component in Angular
- Angular Push Object into Array Example