Working with actions and events in Angular

Your front-end application will allow user input of data for the rest of your application to use. Angular provides a robust set of data-binding input utilities for communicating state between what the user sees and Angular's internal data model.

A common type of user interaction is activating some state of the user interface when a user clicks a button. We can bind to events such as clicks directly on elements in Angular using input events. We can also pass parameters through input events to our components for configuring the response to the event in our application.

Getting ready

Let's add a Create New Post button on our blog application. We could accomplish this behavior by making the Create New Post button a router-link. However, the simplest approach would be to just keep within the current component context and use a modal to display an alternative state of the same template. We'll use input events to bind clicking on the button in the side panel...