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
, andheader.component.html
in thesrc > app/
folder and you can implement these files yourself.
Get hands-on with 1400+ tech skills courses.