<button (click)="onClick()">Click me</button>

import { Component } from '@angular/core';

@Component({
  selector: 'app-event-binding',
  templateUrl: './event-binding.component.html',
  styleUrls: ['./event-binding.component.css']
})
export class EventBindingComponent {
  onClick() {
    console.log('Button clicked!');
  }
}

<input (input)="onInput($event)">

onInput(event: Event) {
  const inputElement = event.target as HTMLInputElement;
  console.log(inputElement.value);
}

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  template: '<button (click)="notifyParent()">Notify Parent</button>'
})
export class ChildComponent {
  @Output() customEvent = new EventEmitter();

  notifyParent() {
    this.customEvent.emit('Data from child');
  }
}

<app-child (customEvent)="handleCustomEvent($event)"></app-child>

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: '<app-child (customEvent)="handleCustomEvent($event)"></app-child>'
})
export class ParentComponent {
  handleCustomEvent(data: string) {
    console.log('Received:', data);
  }
}

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  ngOnInit() {
    console.log('Component initialized!');
  }
}