> For the complete documentation index, see [llms.txt](https://softstack-factory.gitbook.io/mean-stack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://softstack-factory.gitbook.io/mean-stack/angular/wk3/untitled-1/routing-challenges.md).

# Routing Challenges

## **Challenge One**

On Stackblitz create a new project [https://stackblitz.com/<br>](https://stackblitz.com/)Your goal is to create a small website header

* Create a Menu Header Component
* The menu should have 3 options home, search and about
* When clicked on each option navigates to a new view
* The title should be displayed horizontal. \*Hint flexbox - row

Tips:

* Create a [app-routing.module.ts](/mean-stack/angular/wk3/untitled-1/creating-a-routing-module.md#router-module-boilerplate-explained)
* Don’t forget to place \<router-outlet>\</router-outlet>
* [Create the components](/mean-stack/angular/wk3/untitled/creating-a-component.md)
* [Use Router Link](/mean-stack/angular/wk3/untitled-1/using-the-router-1.md#routerlink)
* [Example Router Here](https://stackblitz.com/edit/angular-routing-module)

## **Routing Challenge Two**

#### **Within the same Stackblitz.**

* ***Cannot Use Router LINK***
* Create a button on the search component, called search. When clicked it should invoke a function and routes to the about page
* Create another button on the about page called back that when clicked invokes a function that navigates to the search page

\
**Tips:**

* [**Programmatic Navigation**](/mean-stack/angular/wk3/untitled-1.md#programmatic-router-navigation)
* [**Example Here**](https://stackblitz.com/edit/angular-router-navigate?embed=1\&file=src/app/home/home.component.ts)