Challenge #5: Header Component

Modify the application by including a custom header component.

We'll cover the following

Problem statement

It seems that every page needs a header with a title and menu button. For a demo application with only two pages, copying and pasting the header code might be acceptable. As your app grows, this might become a burden. Create a custom component that includes a menu button, with a title you can pass as an attribute.

Coding exercise

The complete application is provided below. Write your code where you feel necessary to complete the challenge. It is recommended​ that you try solving the exercise yourself before viewing the solution.

Note: Creating a custom header component requires some new files so we have added header.component.ts, header.module.ts, and header.component.html in the src > app/ folder and you can implement these files yourself.

Get hands-on with 1200+ tech skills courses.