Search⌘ K
AI Features

Navigating Imperatively to a Route

Explore how to perform imperative navigation in Angular applications by using buttons and the Router service. Understand how to handle wildcard routes, add navigation methods in components, and enhance user experience by styling active routes with routerLinkActive directive. This lesson helps you implement programmatic routing beyond routerLink directives to create more dynamic navigation flows.

We learned how to navigate our application using the routerLink directive. However, in a real-world application, we also use buttons for navigation. In this lesson, we will learn how to navigate to a route path imperatively using a <button> element.

When we navigate to a wildcard route, the template of the component property is displayed on the screen. However, as we have seen, the address bar of the browser stays on the invalid URL. So, we need to provide a way for the user to escape from this route:

  1. Open the page-not-found.component.html file and add a <button> HTML element on ...