CMS Week02

Create cms project and components Create a new project Create a new Angular project named cms using the Angular CLI ng command. Be sure to specify the option to prefix all objects with a prefix of cms. Create all of the Contacts components Create all of the contact-related components for your application in this section. Launch VS Code and open the cms project (folder). Open the terminal window. Use the Angular CLI ng command to create the header component. Do not create the component in a new folder (use the ng option to create the component in the current folder). Use the ng command to create a contacts component in a new folder. Change to the contacts folder and use the ng command to create a new component called contact-list in a new folder. Use the ng command to create a new component called contact-detail in a new folder. The folder structure should look similar to the figure below when you are done with this section: Create the contact model class Create a class named contact.model.ts to store all of the data associated with an individual contact. This class is analogous to the Recipe model class in the Recipe Book application. Name the class Contact. Inside of the Contact class, create a method named constructor. This will be the default constructor method of the class. Inside of the parentheses of the constructor method, add the following arguments: id—the id of the contact. name—the name of the contact. email—the email address of the contact. phone—the phone number of the contact. imageUrl—the URL of the photo image of the contact. group—this attribute is only applicable to group contacts. It is an array of other contacts that belong to the group. Make sure to add the access modifier public before each of the arguments defined above. This will make them public properties of the class. Modify the header component Use the Recipe Book project as a template for defining the HTML and CSS for the header component. The header components in the Recipe Book and the cms applications are almost identical. Use the header component in the Recipe Book application as a template for your header component. The header component should contain the WeLearn CMS brand, the Documents, Messages, and Contacts links and User dropdown as shown in the image below. Open the app.component.html file and add a tag to display the header component. Start the application in a command or terminal window using the ng serve command. Go to the browser and enter the URL localhost:4200 to view your application. Your screen should appear as follows. Display the contacts component The contacts component acts as a container for all of the other contacts-related components. Use the Recipes component in the Recipe Book application as a template for creating the contacts component. Open the contacts.component.html file and modify the file as shown below. Open the app.component.html file and add a tag to display the contacts component after the header component. Start the application and open the browser (if it is not already running). Your browser should look similar to the figure below. Display the ContactListComponent The ContactListComponent should display in the ContactsComponent. Use the RecipeListComponent in the Recipe Book application as a template to create the ContactListComponent. Modify the contact-list.component.html file to include a panel header and a panel body. The panel header should include the title (Contacts), and an anchor (button) tag to create a new contact as shown below. The panel body will eventually display the name and picture for each of the contacts in the list. Open the contacts.component.html file and add a tag to display the ContactListComponent. View your application in the browser. Your screen should look similar to diagram below. We also need to define a variable in the ContactListComponent to store the list of contacts to be displayed. Open the contacts-list.component.ts file and define a new variable named contacts whose type is an array of Contact objects. Initialize the array you created with two new “dummy” Contact objects. Assign values similar to the ones below to each of the properties for each Contact object. Contact One id: "1" name: "R. Kent Jackson" email: "[email protected]" phone: "208-496-3771" imageUrl: "../../assets/images/jacksonk.jpg" group: null Contact Two id: "2" name: "Rex Barzee" email: "[email protected]" phone: "208-496-3768" imageUrl: "../../assets/images/barzeer.jpg" group: null Open the contact-list.component.html file. Modify this file to display all of the contacts in the contacts list. Display the value of the name property and the image specified in the imageUrl property of the contact. Use the recipe-list.component.html file in the Recipe Book application as a template for the contact- list.component.html file. Be sure to use the ngFor directive to display the list of contacts....