How to Redirect One HTML Page to Another in Angular 7 Using Button Click

In the world of web development, it's often necessary to redirect users from one HTML page to another based on user actions, such as a button click. In this guide, we will walk through the steps to achieve this functionality using Angular 7 and its built-in Router service. Whether you are building a simple application or a complex web application, understanding how to navigate between pages in Angular 7 is crucial. Let's dive into this step-by-step tutorial.

Step 1: Set Up Your Routes

The first step involves setting up your application's routes. This is done by configuring your routes in the Angular routing module (). Here’s how you can do it:

Open your file in your Angular project.

Import the necessary modules and services:

import { NgModule } from '@angular/core';import { RouterModule, Routes } from '@angular/router';import { HomeComponent } from '';import { AnotherComponent } from '';

Define your routes array:

const routes: Routes  [  { path: '', component: HomeComponent },  { path: 'another', component: AnotherComponent }];

Export the configureRoutes method:

@NgModule({  imports: [(routes)],  exports: [RouterModule]})export class AppRoutingModule { }

Step 2: Create the Button in Your Component Template

The next step is to create a button in the HTML template of the component where you want to trigger the redirect. Bind a click event to a method that will handle the navigation:

Open the component template file (e.g., ) of your Angular component.

Add a button and bind its click event to a method:

button (click)"navigateToAnotherPage()">Go to Another Page/button>

Step 3: Implement the Navigation Logic in Your Component

Finally, in your component’s TypeScript file, inject the Router service and implement the navigation logic:

Open the component file (e.g., ) of your Angular component.

Inject the Router service and implement the navigation method:

import { Component } from '@angular/core';import { Router } from '@angular/router';@Component({  selector: 'app-home',  templateUrl: '',  styleUrls: ['']})export class HomeComponent {  constructor(private router: Router) {}  navigateToAnotherPage() {    (['/another']);  }}

Step 4: Ensure Your Component Is Declared

Make sure that your components are declared in your module, usually in the file:

Open the file in your Angular project.

Declare your components:

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { AppRoutingModule } from '';import { AppComponent } from '';import { HomeComponent } from '';import { AnotherComponent } from '';@NgModule({  declarations: [    AppComponent,    HomeComponent,    AnotherComponent  ],  imports: [    BrowserModule,    AppRoutingModule  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }

Summary

In summary, to redirect users from one page to another in your Angular 7 application when they click the button, follow these steps:

Define your routes in the routing module.

Create a button in your components template and bind a click event to a method.

In the component class, use the Router service to navigate to the desired route when the button is clicked.

By implementing these steps, you can ensure that your Angular 7 application has the necessary functionality to handle user navigation effectively. Whether you are redirecting visitors between unrelated pages or moving within a single application, this method provides a straightforward and efficient solution.