routing navigate method not redirecting to targeted component

Question

I have an issue with using routing navigate method of angular. I have two components : LoginComponent and HomeComponent. When I click on the button in "login.component.html", I want to be redirected to "home.component.html".

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {path: 'home', component: HomeComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule, RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

login.component.html

 <button class="btn btn-primary" (click)="goHome();" class="clickable">Home</button>

home.component.html

<p>
  home works!
</p>

The URL changes but it remain in the same component page.

login.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private router:Router) { }

  ngOnInit() {
  }

   goHome() {
    this.router.navigate(['home']);
  }
}

check if the router-outlet tag is commented

Arokia Lijas
– Arokia Lijas

2020-11-19 13:49:22 +00:00
Commented Nov 19, 2020 at 13:49 — Arokia Lijas
– Arokia Lijas, Commented Nov 19, 2020 at 13:49

Bhavik Patel · Accepted Answer · 2018-10-31 13:22:24Z

7

Make these additions:

<button class="btn btn-primary" (click)="goHome();" class="clickable">Home</button>

    goHome() {
    this.router.navigate(['home']);
  }

or via <a>.

<a [routerLink]="['/home']">home</a>

If necessary, remove / if you intend to be appended to the current route instead.

edited Oct 31, 2018 at 13:22

Bhavik Patel

7721 gold badge7 silver badges21 bronze badges

answered May 19, 2018 at 17:43

Desu

9101 gold badge13 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohamad Mirzadeh · Accepted Answer · 2020-01-14 10:44:53Z

3

first of all you need to define routes in app.routing.modules.ts like this:

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

const routes: Routes = [
  { path: 'Home', loadChildren: () => import('./Home/Home.module').then(m => m.HomeModule) },
  {
path: '',
redirectTo: '',
pathMatch: 'full'
}
];

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

you need to do this in your Login ts file:

goHome() {
    this.router.navigate(['/home']);
  }

and

<button (click)="goHome()">Home</button>

in Login Html file

Or just:

<button [routerLink]="'home'">Home</button>

in Login html file.

edited Jan 14, 2020 at 10:44

answered Jan 5, 2020 at 13:30

Mohamad Mirzadeh

3382 silver badges7 bronze badges

Comments

Hamza Hsn · Accepted Answer · 2018-05-19 18:01:05Z

2

If you want to load multiple routes in your template then you can use in your app.component template:

 <router-outlet> <router-outlet>

If you want to load nested routes, then try to use:

constructor(private routes: ActivatedRoute) {}
|
|
|
this.route.navigate(['home'], {relativeTo: this.routes});

and use the routerLink directive in your a tag and then pass the route which you specified in your path

hope it's useful.

answered May 19, 2018 at 18:01

Hamza Hsn

744 bronze badges

Comments

Özcan Diler · Accepted Answer · 2020-12-21 21:57:22Z

0

Add the routerLink to the button

<button routerLink="/home">Home</button>

answered Dec 21, 2020 at 21:57

Özcan Diler

212 bronze badges

Comments

Joya · Accepted Answer · 2022-09-23 12:41:43Z

0

Don't need to write these method in ts file

goHome(){
      this.router.navigate(['home']);
     }

just add routerLink attribute in button tag

<button class="btn btn-primary" (click)="goHome();" class="clickable" routerLink="/home">Home</button>

edited Sep 23, 2022 at 12:41

answered Sep 23, 2022 at 12:35

Joya

1211 silver badge4 bronze badges

Comments

NIKIL S · Accepted Answer · 2023-07-12 09:53:21Z

0

Verify the following the steps for proper navigation

Step 1: By default, the RouterModule is imported in the app-routing.module.ts

Step 2: Check whether you have this below code in your app.component.html

<router-outlet></router-outlet>

Step 3: Define the correct path in app-routing.module.ts

const routes: Routes = [
  {
    path: 'Home', component: HomeComponent,
  }, 
];

answered Jul 12, 2023 at 9:53

NIKIL S

113 bronze badges

Comments

yash chapani · Accepted Answer · 2024-12-09 06:17:24Z

0

<button class="btn btn-primary" (click)="goHome();" class="clickable" routerLink="/home">Home</button>

goHome() {
    this.router.navigateByUrl('/home',{replaceUrl:true})
}

answered Dec 9, 2024 at 6:17

yash chapani

456 bronze badges

Collectives™ on Stack Overflow

routing navigate method not redirecting to targeted component

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related