Assignment #10 Add the Humor Components we are going to add the building blocks for our Humor Application Remember during Assignment #7 we designed the "rectangles" that would become the components for the Humor Application we are now going to generate these In Command Prompt making sure you are in the C:\Humor folder and run this command: ng generate component menu this will create the menu folder and the 4 files noted in Assignment #9 it will also update the src/app/app.module.ts file to include the import command to load the new component Look at the newly generated src/app/menu/menu.component.ts file it contains: @Component({ selector: 'app-menu', templateUrl: './menu.component.html', styleUrls: ['./menu.component.css'] }) Note the selector: app-menu, this is the special HTML tag that will load the menu.component.html contents Look at the menu.component.html file, it has "placeholder" contents, we will be changing this file next Let's update the Humor Application Starting with src/index.html replace the existing body tag with this code:

Humor Application

Next we are going to update src/app/app.component.html replace the entire contents with this code:

Next we are going to edit src/app/menu/menu.component.html and replace the entire contents with

The menu goes here!

Finely will will add CSS background color so we can see there this component "rectangle" appears on the page Edit the src/app/menu/menu.component.css file and add this line #mymenu { background-color: #99FFCC; } Open a Command Prompt and in the C:\Humor folder run: ng serve then open Browser to see the green background for the Menu component Kill the Angular Development Environment (Control-C) before you go on =============================================================================== We are now going to repeat these steps for the rest of the components Generate: a welcome component a message component a footer component a numbered component a keyed component a dated component I suggest different background colors for each component, see https://www.december.com/html/spec/softhues.html for ideas Change the src/app/app.component.html to this:

run: ng serve open a Browser to see the components on the page feel free to add the other components you built to see the effect ===================================================================== Remember to generate the components for the C:\Humor-Example project also. you do not have to edit the generated files, you will be replacing them later