How to link a button to another page in Angular 16

In Angular 16, you can easily link a button to another page using the routerLink directive. This directive allows you to specify the route to navigate to when the button is clicked.

First, make sure you have the Angular Router module installed in your application. If not, you can install it using the following command:

      
        npm install @angular/router
      
    

Once the router module is installed, you can use the routerLink directive to link a button to another page. Here’s an example:

      
        <button routerLink="/dashboard">Go to Dashboard</button>
      
    

In the above example, when the button is clicked, the user will be navigated to the ‘/dashboard’ route. You can replace ‘/dashboard’ with the route of the page you want to link to.

Additionally, you can use the routerLink attribute binding to dynamically link the button to another page based on some condition. Here’s an example:

      
        <button [routerLink]="isUserLoggedIn ? '/dashboard' : '/login'">Go to Dashboard</button>
      
    

In this example, the button will be linked to ‘/dashboard’ if the user is logged in, otherwise it will be linked to ‘/login’.

Finally, don’t forget to configure the routes in your Angular application. You can do this in the app-routing.module.ts file by importing the RouterModule and Routes from ‘@angular/router’ and defining the routes using the RouterModule.forRoot() method.

By following these steps, you can easily link a button to another page in Angular 16 using the routerLink directive.