Angular 18 Button Click Event Example

This article will provide some of the most important example angular 18 click event. This article goes in detailed on angular 18 button click event example. This post will give you a simple example of button click event in angular 18. This article will give you a simple example of click event in angular 18 example.

Angular 18's button click event handling remains consistent with previous versions. Developers can use the (click) event binding to trigger functions or actions when a button is clicked. This event binding is a fundamental part of Angular's event-driven architecture, allowing for interactive user experiences. With Angular's continued evolution, enhancements to performance, features, and tooling may be expected, but the core concepts like button click event handling remain stable and familiar to developers.

In this example, we will create a function clickMe() and bind it to the button click event. We will take the variable count and add that variable based on the button click. So, let’s take a look at the simple steps:

So, let's follow the following steps:

Step for Button Click Event in Angular 18

• Step 1: Create Angular 18 Project
• Step 2: Update Ts File
• Step 3: Update HTML File
• Run Angular App

Let's follow the steps:

Step 1: Create Angular 18 Project

You can easily create your angular app using below command:

ng new my-new-app

Step 2: Update Ts File

here, we need to update ts file as like bellow with lat and long variable:

src/app/app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
  
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  count: number = 0;
  
  clickMe() {
    this.count++;
  }
  
}

Step 3: Update HTML File

here, we need to update html file as like bellow code:

src/app/app.component.html

<div class="container">
    <h1>Angular 18 Button Click Event Example - ItSolutionStuff.com</h1>
        
    <button type="button" class="btn btn-success" (click)="clickMe()">Click me!</button>
    <strong>Counter: {{ count }}</strong>
</div>

Run Angular App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app:

ng serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:4200

Preview:

now you can check it.

I hope it can help you...