Communication from the child component – using 
@Output

We studied how parent components, which can be either smart or presentational, can communicate with their child components by using attributes marked with the @Input decorator.

However, when we need the opposite, the child component passes some information to the parent. As we saw in the previous section, business rule processing should ideally happen in the Smart component. For this type of communication, we mark attributes with the @Output decorator.

Let’s create a button for adding an item to our diary. We’ll see the use of forms in Chapter 6, Handling User Input: Forms, but here we want to focus on the interaction between components.

Using the Angular CLI, we will create the new component using this command:

ng g c diary/new-item-button

In the new component’s template, let’s move the diary button template into the component:

<button
  class="rounded...