button click open component

Question

In the project I work with Angular, I want it to go to the other component when the button is clicked, but it does not. I connected the navigate method to the button in the menu and wrote the method but it didn't. How can I fix?

.html

<button mat-menu-item (click)="navigate()">Reservations List</button>

.ts

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

.routing

  { path: 'reservationdetail', component: ReservationdetailComponent }

.app module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HotelComponent } from './hotel/hotel.component';
import { ReservationdetailComponent } from ' 
./reservationdetail/reservationdetail.component'; 
import { RezervasyonComponent } from './rezervasyon/rezervasyon.component';

export const routes: Routes = [
{ path: 'hotel', component: HotelComponent },
{ path: "**", redirectTo: "hotel", pathMatch: "full" },
{ path: 'rezervazyon', component: RezervasyonComponent },
{ path: 'reservationdetail', component: ReservationdetailComponent }
];

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

You need router-outlet to render the dynamically routed component angular.io/api/router/RouterOutlet — Chellappan வ
– Chellappan வ, Commented Apr 14, 2020 at 13:36
Check your browser console for any errors - this may be helpful. Or post more of your code here — Jan Ranostaj
– Jan Ranostaj, Commented Apr 14, 2020 at 13:39
I'm not getting an error. I edited the code in more detail. I applied it to the bottom, and I got the Can't bind to 'routerLink' since it isn't a known property of 'button' error. — enesturan
– enesturan, Commented Apr 14, 2020 at 14:10

Cagri Tacyildiz · Accepted Answer · 2020-04-14 13:45:28Z

3

If only navigate in function u don't to navigate in function . U can navigate from html

<button mat-menu-item [routerLink]="['/reservationdetail']">Reservations List</button>

answered Apr 14, 2020 at 13:45

Cagri Tacyildiz

17.7k6 gold badges38 silver badges61 bronze badges

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

12 Comments

enesturan Over a year ago

hocam yardımın için teşekkürler ama şöyle bir hata aldım onu çözmeye çalışıyorum şimdi. Can't bind to 'routerLink' since it isn't a known property of 'button'. ("u"> <button mat-menu-item (click)="search2()">Price Search</button> <button mat-menu-item [ERROR ->][routerLink]="['/reservationdetail']">Reservations List</button> </mat-menu>

Cagri Tacyildiz Over a year ago

App.modules içine routermodülü import ettin mi? import { RouterModule } from '@angular/router';

enesturan Over a year ago

evet onu çok önceden yaptım zaten başka route işlemleri için hatta şimdi de baktım yapmışım zaten.

Cagri Tacyildiz Over a year ago

App.modules de soru içinde paylaşır mısın?

Martin Parenteau Over a year ago

Posts and comments should be in English.

|

Indrajeet · Accepted Answer · 2020-04-14 15:00:15Z

1

Do you have this route setup in app.module.ts at root level?

if not, you must be having other modules route before your component.

you make sure you write it like,

this.router.navigate(['/root/parent/../reservationdetail']);

that will work 😊

UPDATE

export const routes: Routes = [
{ path: 'hotel', component: HotelComponent },
{ path: 'rezervazyon', component: RezervasyonComponent },
{ path: 'reservationdetail', component: ReservationdetailComponent },
{ path: "**", redirectTo: "hotel" }
];

can you update like this?

edited Apr 14, 2020 at 15:00

answered Apr 14, 2020 at 14:03

Indrajeet

5013 silver badges10 bronze badges

13 Comments

enesturan Over a year ago

I edited the code and shared it. I installed the app module up. This method does not work unfortunately

Indrajeet Over a year ago

can you tell me hierarchical structure of your app from root to this component. I am asking this because it is usually easy to achieve.

enesturan Over a year ago

I am writing a hotel project. There is a button when my page first opened. Clicking the button, two options appear. The first option is the section where the search screen works properly, but the second option should go to the reservation detail page, but I could not do it.

Indrajeet Over a year ago

I guess that's the catch, you must be having some sort of path for first page, can you check that. is 1st page opening at localhost:4200

enesturan Over a year ago

hotel component opens on the first page. Because I wrote it as root, you can look at the code above.

|

Collectives™ on Stack Overflow

button click open component

2 Answers 2

12 Comments

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related