CODEWITHSUNDEEP
htmlangularcomponentsangular8
Cecilia Mesquita Pacheco
Cecilia Mesquita Pacheco

Reputation: 13

How to pass a function from a parent to a deep nested child and use an @input value into the passed function in Angular 8?

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.

Upvotes: 1

Views: 1737

Answers (1)

Raviteja V
Raviteja V

Reputation: 344

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.

Upvotes: 1

Related Questions