How to emit router event

Question

I have 2 modules, one is sidenav, where I can select the menu and want to show component in content module where have router-outlet. I want to know what is the best way to do that? Have some router event where I can just subscribe in content module? Because I will use service to emit component and subscribe event in router-outlet component, but I guess that is not best practice. Something like that:

Service:
private emit = EventEmitter<string>
emit(component: string): void {
 this.emit.emit(component)
}

and in component I just subscribe in service emit and use router.navigate to show component in router-outlet. Hope someone can help me =). Thanks

score 0 · Answer 1 · answered Jul 06 '18 at 13:18

If I got you correctly :

Sidenav

@Output() navigate: EventEmitter<string[]> = new EventEmitter();

emit (route: string[]) {
  this.navigate.emit(route);
}

Parent of sidenav

<app-sidenav (navigate)="router.navigate($event)"></app-sidenav>

Remember to make the router public in the parent component :

constructor(public router: Router) {}

score 0 · Answer 2 · answered Feb 28 '22 at 10:57

child-component HTML

<app-child
[formGroup]="formChild"
(navigate)="onNavigate($event)"
></app-child>

TS

@Output() navigate: EventEmitter<string[]> = new EventEmitter();
  route = ['yourUrl'];


  onNavigate(route: string[]) {
    this.route = route;
    this.navigate.emit(route);
    //console.log(route);
  }

Parent component

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

Hope to be helpful!

How to emit router event

2 Answers2