CODEWITHSUNDEEP
angular
Sandeep Thomas
Sandeep Thomas

Reputation: 4727

Event emitter in router-outlet for getting value from child to parent

I have my parent component looks like this

<div class='placeholder'>
  <router-outlet (newItemEvent)="changeLoadText($event)"></router-outlet>
</div>

I am trying to get some value from child component.

So in the child component Ts file I have created below function to handle the emitted event.

  changeLoadText(newLoadingText:string) {
    this.loadingText=newLoadingText;
  }



  @Output() newItemEvent = new EventEmitter<string>();   
  changeLoadText(value:string){
    this.newItemEvent.emit(value);
  }

So I am calling the above changeLoadText in few functions in the child component to update spinner text in parent.

So in parent ts file I have created below method to handle emitted event from child

  changeLoadText(newLoadingText:string) {
    this.loadingText=newLoadingText;
  }

But it shows a compile error

Error: src/app/pages/dashboard/dashboard.component.html:13:51 - error TS2345: Argument of type 'Event' is not assignable to parameter of type 'string'.

13     <router-outlet (newItemEvent)="changeLoadText($event)"></router-outlet>

I didnt understand what I did wrong. Is it because router-outlet is not that something to handle emitted event from child??

Upvotes: 2

Views: 1623

Answers (2)

Alex Lipov
Alex Lipov

Reputation: 13938

A possible workaround for this is to use router-outlet's activate event to get a reference to a child component, and then subscribe to its EventEmitter directly.

<router-outlet (activate)="subscribeToChildEmitter($event)"></router-outlet>

and then in your parent component:

subscribeToChildEmitter(componentRef: any) {
  if (componentRef.newItemEvent != null) {
    componentRef.newItemEvent.subscribe((newLoadingText:string) => {
      this.loadingText=newLoadingText;
    });
  }
}

Upvotes: 0

ShayD
ShayD

Reputation: 799

The router outlet has two events activate and deactivate that emit your component ref.

Angular documentation - Router Outlet

Stackblitz - Router basic example dvsmnx

So, In your case, If you have loadingText property in your child component

Child TS

loadingText:string = 'some text';

And your parent component is catching the activate event with changeLoadText function

Parent HTML

<div class='placeholder'>
  <router-outlet (activate)="changeLoadText($event)"></router-outlet>
</div>

Then you can have your data using the component reference

Parent TS

  changeLoadText(CompRef:any) {
    let ChildText:string = CompRef?.loadingText;
    console.log(ChildText); // 'some text'
  }

Upvotes: 3

Related Questions