Angular 10 Button Click Call Function Example

This article goes in detailed on angular 10 click event example. Here you will learn button click angular 10. i explained simply step by step angular 10 call component function on button click. I’m going to show you about angular 10 button call component function.

If you are new and very beginner with angular 10 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.

Preview:

aap.component.html

<div class="container">
  <h1>Call a Function on click Event in Angular 10 - HDTuto.com</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>

you can install bootstrap for your application because i used it. you can install it by this link: Install Bootstrap to Angular 10.

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 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 it can help you...