Listening to Element Events

Explain how to use Renderer2 to listen for click events on a button and handle them in Angular.
import { Component, Renderer2, ElementRef, OnInit } from '@angular/core';

  selector: 'app-my-component',
  template: `<button #myButton>Click me!</button>`
export class MyComponent implements OnInit {

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit() {
    // Obtaining a reference to the native element
    const button = this.el.nativeElement.querySelector('button');

    // Listening for click events on the button
    const unlisten = this.renderer.listen(button, 'click', (event) => {

    // If you ever want to remove the listener
    // unlisten();

  handleClick(event: Event) {
    // Handle the click event
    console.log('Button clicked!', event);

This code snippet defines an Angular component with a button element in its template. The `ngOnInit` lifecycle hook obtains a reference to the button and uses `Renderer2` to listen for click events. When a click event occurs, the `handleClick` method is called, and the event is logged to the console. The `unlisten` function is a callback that can be called to remove the event listener if needed.