Blog>
Snippets

Virtual DOM - Event Handling

Implement a click event listener within a Virtual DOM element and handle the event using Angular's component methods.
import { Component } from '@angular/core';

@Component({
  selector: 'app-click-me',
  template: `<button (click)="handleClick()">Click me!</button>`
})
export class ClickMeComponent {
  handleClick() {
    // Handle the click event
    console.log('Button clicked!');
  }
}
This Angular component 'ClickMeComponent' defines a button in its template with a click event listener. The '(click)' syntax is used to bind the 'handleClick()' method to the click event of the button. When the button is clicked, the 'handleClick()' method is called, and it logs a message to the console.