Now, we need to add one more change in app.component.html:

<div class="container">
    <add (onAdded)="onAddedData($event)"></add>
    <list [phoneList]="listData"></list>
</div>

We also need to add a change in app.component.ts, which is as follows:

export class AppComponent {
    public listData = [];
    onAddedData(newListData: any) {
        this.listData = newListData;
    }
}

This change is required to communicate between two components. What is this communication required for?
When we add a new record in the add component, it needs to send the newly added data to the list component, which cannot be bound directly, so we use @output to bind the data back to the parent. The EventEmitter is used to emit the response data via the binding in the app template, which can be seen as follows:

<add (onAdded)="onAddedData($event)"></add>.

Here, the app component acts as a bridge between them. Once the parent receives the data in the AddedData method, it communicates to its child list component via the @input binding of the listData variable.

Watch for the changes in the browser; the form component adds new data to the list and our phonebook app is ready for its first prototype.

Frontend frameworks have recently taken on somewhat religious undertones. Post a negative comment or criticism about a particular framework and it's likely you'll get blasted by its supporters. Likewise, talk positively about a particular framework, and again, it's likely you'll get attacked about how much better a different framework handles the same topic. The bottom line when deciding which framework is right for you and/or your project is typically going to be about personal preference. Each of the frameworks featured on the TodoMVC website can clearly accomplish the same goals, each in its own unique way. Take some time to evaluate a few and decide for yourself!