Angular 7 router.navigate with message after redirecting

Question

I'm using this code to redirect this.router.navigate(['/abc']); . How to show some message on the new page using <ngb-alert> , Is it possible to pass some variable while redirecting but not as url query parameters?

Answer 1

You can do that with State as below:

When you want to navigate set state :

const navigationExtras: NavigationExtras = {state: {data: 'This is an example'}};
this.router.navigate(['/abc'], navigationExtras);

In destination component you can get data like the following:

data:string;
constructor(private router: Router) { 
   const navigation = this.router.getCurrentNavigation();
   const state = navigation.extras.state as {data: string};
   this.data = state.data;
}

Answer 2

You can use a service to pass data from one component to another without using route parameters at all.

Their is already a datailed topic about this. Send data through routing paths in Angular

Answer 3

Angular does not provide a way to send data with navigate funvtion u can used a hack insted

let route = this.router.config.find(r => r.path === '/erro');
route.data = {name: 'name' };
this.router.navigateByUrl('/error')

or

user queryParam to pass Data