Submodule 20.2: Data Binding - Practice

Introduction

So far we have created this static webpage:

This is a static webpage without Interactivity and we could have created it without Angular .

Let's go one step further:

• We want to add comments to each Choco-dish (comment.ts)
• Update the existing dish.ts to receive comments
• Centralize the data so each component will take them from one source (dishes.ts)
• Update the two components so that when the user clicks on a Choco-dish will see details and comments about this one. What we will actually do will be to create an interactive and dynamic page.

So, in this submodule, you will use your knowledge of data binding to update the Angular application to enable you to select any Choco-dish from the menu and show its details. You will:

• Leverage data binding for communication among components
• Design a component to receive input from another component.