Event Binding: Click, Input, and User Actions
Handle clicks, typing, and events using Angular event binding with clear examples.
Angular makes it easy to respond to user actions like clicking buttons or typing. ## Click event Template: ```html <button (click)="increase()">Increase</button> <p>Count: {{ count }}</p> ``` Component: ```ts export class CounterComponent { count = 0; increase() { this.count++; } } ``` ## Input event (typing) Template: ```html <input (input)="onTyping($event)" placeholder="Type your name" /> <p>Hello {{ name }}</p> ``` Component: ```ts export class NameComponent { name = ''; onTyping(event: Event) { const input = event.target as HTMLInputElement; this.name = input.value; } } ``` ## Pro tip: Keep templates simple If you need 10 lines of logic, put it in the component method, not inside HTML. > Next: Property binding (set attributes and values safely).