WDD 430 W03 Assignment Instructions

In this assignment, you will do the following: Modify the cms application to make it more modular Use data binding to pass input data from a parent component to a child component Use event emitters to output data up to a parent component Use the ngIf directive to selectively load components Use local references and @ViewChild to access elements in the Document Object Model (DOM) Making your application more modular The ContactListComponent currently loops through and displays the name and the image of each contact in the contacts list. The display of this information is tightly coupled with the display of the list itself. Functionally, this component has two highly-related but different tasks: (1) display a list of contacts, and (2) display detailed information about a single contact in the list. This makes the code messy, hard to debug, and hard to change. In addition, we need to display the same, detailed contact item information in a similar but different list in the ContactDetailComponent. A more modular approach is to create two distinct components: one to display the list of contacts and one to display the detailed information for a contact item in the list. This allows changes to be made to either component without affecting the code in the other. In addition, we can reuse the component to display a contact item in the ContactDetailComponent as well when we need to display a list of contacts belonging to a team or group.