Solution 1 :

Method 1:
You can call the parent component function(OuterComponent) from the child component(InnerComponent) using @Output.

OuterComponent HTML:

<MiddleComponent (updateOuterComponent)="parentFunction($event)" />

OuterComponent TS:

export class OuterComponent implements OnInit {

    constructor() {}

    ngOnInit() {}

    parentFunction(para) {
      console.log(para);
      // operations you want to do in parent component
    }

}

MiddleWare HTML:

<InnerComponent (updateMiddleComponent)="middleFunction($event)" />

MiddleComponent TS:

export class MiddleComponent implements OnInit {

   @Output() updateOuterComponent = new EventEmitter();

    constructor() {}

    ngOnInit() {}

    middleFunction(para) {
      this.updateOuterComponent.emit(para);
    }

}

InnerComponent HTML:
It can be whatever you want to write

InnerComponent TS:

export class InnerComponent implements OnInit {

       @Output() updateMiddleComponent = new EventEmitter();

        constructor() {}

        ngOnInit() {}

        updateMiddleAndParent(para) {
          this.updateMiddleComponent.emit(para);
        }

    }

Once you call updateMiddleAndParent function form Inner component using emitter, that will trigger middleFunction in the MiddleComponent. After triggering middleFunction, Similarly middleFunction will trigger parentFunction with the help of emitter.

Method 2:
You need to create a service and use it to call the parent function:

DataService:

import {BehaviorSubject} from "rxjs/BehaviorSubject"

export class DataService {
    private state$ = new BehaviorSubject<any>('initialState');

    changeState(myChange) {
        this.state$.next(myChange);
    }

    getState() {
        return this.state$.asObservable();
    }
}

call DataService in both InnerComponent and OuterComponent:
In the OuterComponent call DataService and call getState(), this will return an observable whenever the value changes you can any function using data passed in observable response.

In the InnerComponent call DataService and use the changeState() to change the value.

once the value is changed in DataService, then in parent Component the value will be change as you are subscribed to the observable, You will get the updated data from there you can call any function in parent.

Problem :

I have 3 components in this situation:

-OuterComponent
--MiddleComponent
---InnerComponent

I need to pass a function from OuterComponent to InnerComponent through MiddleComponent.

It is important to mention that the function I need to pass does take an input: DoSomething(node)

I don’t know if it is relevant but I am already passing a NodeTree from the OuterComponent to the MiddleComponent and then I am unpacking the NodeTree into a Node and passing it InnerComponent. This Node is what I need to use as an input for the function being passed.

So, I need to be able to use an @Input as the input for the function being passed to the InnerCompoenent, which I assume will need to be an @output.

Comments

Comment posted by Rence Abishek

Do u want to pass value from outerComponent to Innercomponent via Input and output decorator? Or you can use service to pass

Comment posted by Cecilia Mesquita Pacheco

@RenceAbishek I want to do it via Input and Output decorator if possible because the function I want to call does call on other functions in the class and I would have to move half of the logic out if I wanted to use a service.

By

Leave a Reply

Your email address will not be published. Required fields are marked *