[FIXED] How to send output from component via router-outlet to parent component

Issue

I need to emit a string when Parent page

<div class="container-fluid fluidy">
     <router-outlet (currentpage)="componentAdded($event)"></router-outlet>
</div>

Parentpage.ts

  componentAdded(stringer){
    console.log(stringer);
    this.currentpage = stringer;
  }

Child page

  @Output() currentpage = new EventEmitter<string>();

  ngOnInit(): void {
    this.currentpage.emit('profile');
  }

Solution

If a component is launching inside router-outlet, its no more a child component of component having router-outlet. hence normally having output on router-outlet tag will not work. Instead you can do something like

Parent component html

<router-outlet (activate)="componentActivated($event)" (deactivate)="componentDeactivated($event)"></router-outlet>

Parent component ts

componentAddedSubscription: Subscritption;
componentActivated(component) {
    if(component instanceof ChildComponent) {
         this.componentAddedSubscription = component.currentpage.subscribe(res=>{
              //your logic
         });   
    }
}

componentDeactivated(component) {
   if(component instanceof ChildComponent) {
         if(this.componentAddedSubscription?.unsubscribe) {
             this.componentAddedSubscription.unsubscribe();
         }
   }
}

Answered By - Aakash Garg

Answer Checked By - Pedro (PHPFixing Volunteer)