Challenge: Implement Navigation System Using Routing

Complete the challenge of implementing routing in an Angular application.

We'll cover the following

Problem statement

Implement a navigation system that allows users to navigate between views using Angular router.

Requirements

In the initial code setup provided below, a simple Angular application with three components home, profile, and settings has been created. You are required to implement the following tasks:

  1. Set up Angular router to enable navigation between these components.

  2. Implement a navigation menu with links to each component, allowing users to switch between views.

  3. Implement functionality to change the style of a route when it is active.

  4. Ensure that each component has a unique URL, and you can bookmark and share these URLs.

  5. Utilize route parameters or query parameters to pass data between components dynamically.

  6. Handle cases where users navigate to invalid URLs, and implement appropriate error handling or redirects.

Expected output

  • When you run the application, you should see a default route “Home” as follows:

Get hands-on with 1200+ tech skills courses.