WDD 430 - W04 Assignment

Implement the Documents Feature In this assignment, you will implement the components of the Documents feature and create a custom directive for managing a dropdown menu. You created the basic components for the Documents feature in the last lesson, but they did not functionally do anything. We need to modify these components to display a list of documents and to display the detailed information for a document when it is selected in the list. This is very similar to what you have already done when you implemented the Contacts feature. Implement the DocumentItemComponent The DocumentItemComponent is very similar to the ContactItemComponent you implemented in the last two lessons. Use this component as a guide for the changes that you need to make for this component. Follow the instructions below to implement the DocumentItemComponent: To save you some typing, the basic HTML and CSS files for the document components may be downloaded for use in this assignment. Select the link below to download these files, and then locate and extract the zip file that you downloaded: Lesson 4 FilesDownload Lesson 4 Files Locate and open the document-item.component.css file in the lesson4Files folder that you just unzipped. Copy the entire contents of the file. Next, open the cms project in VS Code and open the document-item.component.css file in the documents folder. Delete the entire contents of this file and paste in the contents of the corresponding file you copied from in the lesson4Files folder. Open the document-item.component.html file in the lesson4Files folder that you just unzipped and copy the entire contents of the file. Locate and open the document-item.component.html file. Delete the entire contents of this file and paste in the contents of the corresponding file you copied from in the lesson4Files folder. Open the document-item.component.ts file and define an input class variable named document of the document data type. You will need to import the Document model class. Open the document-item.component.html file again and use string interpolation to display the name property of the Document object passed to the component and assigned to the document input variable. Save all your changes.