Angular Event Binding

Angular Event Binding

Event binding lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.

Events are handled in Angular using the following special syntax. 

(target event name) = "template statement"

Bind the target event name within parentheses on the left of an equal sign, and event handler method or statement on the right.

<button (click)="onShow()">Show</button>

Above, (click) binds the button click event and onShow() statement calls the onShow() method of a component.

@Component({
  selector: 'event-demo,
  template: '<button (click)="onShow()" >Show</button>'
})
export class EventBindingDemoComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {
  }
  onShow() {
    alert('Show button clicked!');
  }
}

Angular Directives

What is an angular pipe

What is Angular

Angular Installation