Communication between components – inputs and outputs

In our gym diary application, we now need the workout list page component, DiaryComponent, to communicate with the list item component, EntryItemComponent.

The simplest way to accomplish this communication is with Angular’s Property Binding concept. Despite the complicated name, in practice, we annotate a component object’s property with the @Input annotation, so Angular creates a custom HTML attribute on the component.

Let’s see this concept in practice; first, let’s create an interface that will represent an item in our diary:

ng g interface diary/interfaces/exercise-set

With the preceding command, we create the file and, as an organized practice, we create a folder to store the module’s interfaces. In the generated file, we will define the object we want to communicate with:

export interface ExerciseSet {
  id?: string;
  date: Date;
  exercise...