Questions tagged [angular-router]

For the Angular Router service (@angular/router)

The Angular Router enables navigation from one view to the next as users perform application tasks.

The Angular Router can interpret a browser URL as an instruction to navigate to a client-generated view. It can pass optional parameters along to the supporting view component that help it decide what specific content to present. You can bind the router to links on a page and it will navigate to the appropriate application view when the user clicks a link. You can navigate imperatively when the user clicks a button, selects from a drop box, or in response to some other stimulus from any source. And the router logs activity in the browser's history journal so the back and forward buttons work as well.

To find more information :

1799 questions
368
votes
10 answers

Send data through routing paths in Angular

Is there anyway to send data as parameter with router.navigate? I mean, something like this example, as you can see the route has a data parameter, but doing this it's not working: this.router.navigate(["heroes"], {some-data: "othrData"}) because…
Motomine
  • 4,205
  • 5
  • 20
  • 23
254
votes
13 answers

Angular: How to update queryParams without changing route

I am trying to update (add, remove) queryParams from a component. In angularJS, it used to be possible thanks to : $location.search('f', 'filters[]'); // setter $location.search()['filters[]']; // getter I have an app with a list that the user…
Olivier
  • 3,121
  • 2
  • 20
  • 28
192
votes
18 answers

Passive Link in Angular 2 - equivalent

In Angular 1.x I can do the following to create a link which does basically nothing: My Link But the same tag navigates to the app base in Angular 2. What is the equivalent of that in Angular 2? Edit: It looks like a bug in the…
s.alem
  • 12,579
  • 9
  • 44
  • 72
182
votes
5 answers

In Angular, What is 'pathmatch: full' and what effect does it have?

In here it is use pathmatch as full and when i delete this pathmatch it doesn't even load the app or run the project import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from…
Chanaka Amarasinghe
  • 3,489
  • 11
  • 26
  • 38
178
votes
23 answers

Angular 5 Scroll to top on every Route click

I am using Angular 5. I have a dashboard where I have few sections with small content and few sections with so large content that I am facing a problem when changing router while going to top. Every time I need to scroll to go to top. How can I…
raihan
  • 2,225
  • 4
  • 14
  • 19
168
votes
10 answers

How to implement RouteReuseStrategy shouldDetach for specific routes in Angular 2

I have an Angular 2 module in which I have implemented routing and would like the states stored when navigating. The user should be able to: search for documents using a 'search formula' navigate to one of the results navigate back to…
Anders Gram Mygind
  • 1,725
  • 3
  • 11
  • 11
125
votes
7 answers

Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?

I am using Angular 7 and facing an issue => after login the API GET calls successfully and the component receiving data too, but UI is not displaying that data. When I open the browser console, immediately the data gets populated on the UI and a…
Er Vipin Sharma
  • 2,519
  • 8
  • 22
  • 32
123
votes
12 answers

How do I navigate to a parent route from a child route?

My problem is quite classic. I have a private part of an application which is behind a login form. When the login is successful, it goes to a child route for the admin application. My problem is that I can't use the global navigation menu because…
Carl Boisvert
  • 2,173
  • 3
  • 17
  • 19
92
votes
4 answers

Best method to set different layout for different pages in angular 4

I am new to angular 4. What I'm trying to achieve is to set different layout headers and footers for different pages in my app. I have three different cases: Login, register page (no header, no footer) routes: ['login','register'] Marketing site…
ninja dev
  • 1,687
  • 2
  • 12
  • 12
87
votes
4 answers

router.navigate with query params Angular 5

I'm having an issue with routing to a route with query params I have a function like so goToLink(link) { this.router.navigate([`${link.split('?')[0]}`, { queryParams: this.sortParams(link)}]); } and this function sortParams(link) { let…
Smokey Dawson
  • 8,827
  • 19
  • 77
  • 152
60
votes
10 answers

How do you mock ActivatedRoute

I'm learning Angular and I want to do tests, but I'm stuck. I've got a function: ngOnInit(): void { this.route.paramMap .switchMap((params: ParamMap) => this.SomethingService.getSomething(params.get('id'))) …
Daria Domagała
  • 703
  • 1
  • 6
  • 7
43
votes
3 answers

Angular Passing Data Between Routes

I have a little problem using routes in angular 4. You know, when I am trying to pass data from a component to another using navigate('root', data), I just received [object Object],[object Object],[object Object]. Component export class…
Kenry Sanchez
  • 1,703
  • 2
  • 18
  • 24
41
votes
5 answers

Navigation ID is not equal to the current router navigation id error

I'm using @ngrx/router-store in my Angularv5 app and I recently started running into a an error: Navigation ID X is not equal to the current navigation id Y (where X and Y are integers). This problem happens consistently when I navigate to route A…
John
  • 9,249
  • 5
  • 44
  • 76
37
votes
6 answers

Angular2 router appends component instead of replacing it

I have an Angular2 application with one router outlet that displays different components depending on which link is clicked in a side menu. The markup for the main component containing the looks like this
Daniel B
  • 8,770
  • 5
  • 43
  • 76
35
votes
7 answers

anchor href vs angular routerlink

I am trying to use anchor tag with href in my Angular 7 app. When I click on the link the url changes in the browser but the page doesn't get navigated to. It works if I put target="_self" so this works Abcd but…
tangokhi
  • 945
  • 2
  • 8
  • 20
1
2 3
99 100