Submodule 21.1: Routing - Practice

Open your Terminal and move to the angularChocoYourname  angular-sub-folder.

To add a new component, the footer, to your application using Angular CLI, type the following at the prompt:

ng generate component footer

Open the angularChocoYourname  angular-sub-folder in your Visual Editor code and check the creation:

Update the footer's template, footer.component.html, and the styles.css  as follows:

View HTML source:

View CSS source:

Note that Angular has automatically updated the app.module.ts

Now update the app.component.html file to include the footer as follows:

<app-footer></app-footer>

With the previous code configured, open a new Terminal, go to the angularChocoYourname  angular-sub-folder and run ng serve to run your application in development mode. In your browser navigate to the URL localhost:4200 

This code will create a page displayed as:

Do a Git commit with the message "Angular Footer".