Pass value between Grandchild component and Parent component

how to pass data from parent component to grandchild component angular
angular 7 communication between sibling components
angular 2 pass data to grandchild component
pass props to grandchild react
sharing data between components angular 6 using service
how to pass value from one component to another in angular 7
sharing data between sibling components
passing data between components vue

Using Angular 8 I have a few components as follows:

Parent 1 > Child 1 > ... > N Grandchild 1 

Parent 2 > Child 2 > ... > N Grandchild 2

Between Child X and N Grandchild X might have other components. So it can be more than 3 levels.

Objective 1. Set a Value in N Grandchild 1 and use it in Parent 1. 2. Set a Value in N Grandchild 2 and use it in Parent 2.

I am considering a few options:

  1. Using an EventEmitter (StackBlitz example)

    Problem: Not working between Grandchild and Parent.

    It seems to work only one level up ... It is possible to make it work N levels up?

    export class GrandchildComponent implements OnInit {
    
      @Output() changeEvent = new EventEmitter<string>();
    
      ngOnInit() {
        this.changeEvent.emit('Hello');
      }
    
    } 
    
  2. Using a Service

    In this case I inject the Service in N Grandchild X to set the value and in Parent X to read the value.

    Problem: How to be sure that Parent 1 reads the value set by N GrandChild 1 and Parent 2 reads the value set by N GrandChild 2? Is this possible?

Like in another answer, which provides solution to use a Subject of some kind, but you face the issue that that subject and its value is shared across the app, if it's provided at root level.

One option is to provide the service at the parent level, which means that the parent and all its descendants have the same instance of the service, so therefore, if grandchild1 emits a value for the subject, only parent1 will receive that value, not parent2.

So what you would do, as mentioned, provide the service at the highest level you want, in this case I would assume it would be the parent:

import { MyService } from './my-service';

@Component({
  selector: 'parent',
  template: `
  Parent:
  <p>Value from grandchild: {{value$ | async}}</p>
  <child></child>
  `,
  providers: [MyService] // <<<<<<<<<< add this (only in parent)!
})

export class ParentComponent { 

  value$;

  constructor(private myService: MyService) {
    this.value$ = this.myService.subj$;
  }
}

and service could have:

private subj = new Subject();
public subj$ = this.subj.asObservable();

setValue(value) {
  this.subj.next(value)
}

And in the grandchild when you want to emit value, just call setValue() with the new value.

STACKBLITZ

How to pass data from grandchild component to parent? : reactnative, 14 votes, 11 comments. I have this user input held within my grandchild component and when the save button is clicked the value should be updated in … The most straightforward way is to pass updateState functions as far down the tree as they need to go. Ideally, your grandchild component is thought of as completely separate from the grandparent component though that quickly becomes tedious.

First Way: You have to emit event on every level of chain, then only you will be able to get the event to the Parent component.

Parent 1(received) > Child 1(emit) > Child 2(emit) > N Grandchild 1(emit);

Second Way: Also for service you can create a message-bus kind of service, when you can specify from and to. So using those flag you can validate from where and for whom the data should be consumed by.

I personally think that you should go with the first approach.

Accessing parent, child, grandchild component variables in Angular , Accessing parent, child, grandchild component variables in Angular 6 -parent- variable-from-children-component/51384602#51384602. Child component (DisplayEmployee Component) should notify the parent component (EmployeeList Component) that a record is deleted so the parent component can remove the respective employee card from the list of employees. For this the child component exposes an event. The parent component assigns a callback method to the child component's event.

You could try using a BehaviorSubject in a injected service in both components, one component listening on the BehaviorSubject. And the other emiting new values for the subject.

@Injectable({
  providedIn: 'root'
})
export class TestService {

  subject: BehaviorSubject<any>;

  constructor() { 
    this.subject = new BehaviorSubject(null);
  }

  getObservable() {
    return this.subject.asObservable();
  }

  updateValue(value) {
    this.subject.next(value);
  }
}

How to Connect Redux to a Grandchild Component, How to Connect Redux to a Grandchild Component pass data from a parent component to a grandchild component. We will create a button in the <Parent / > component and increment the counter value on button click,� Step1: Create a Provider Component for the two children. This Provider mantains the state (data to be used by both components and some callback used to manipulate the states) and returns a contextObject.Provider JSX component ) Step 2: Pass the state and the callback function as props to all children inside the Provider Component.

Sharing Data between Angular Components, Angular components are the building blocks of any Angular application. It works by using the @Input() decorator to allow data to be passed via Child component now has access to the value of “parentMessage” from the parent component. Sharing data between parent-children-grandchildren using� Curreny i am querying those component in my parent component constructor and using a flag to hide child component so that it will not get inserted into dom . i am getting undefined value for all the child parameters even i am passing all those value when i am calling my child component from Ui. I can post my code as well if you want.

Angular 2 - Grandchild Access - angular - html, I would not recommend You could use #Input() in parent component and data binding in the grandparent template to pass a value from grandparent to parent,� As said, there is no way passing props from a child to a parent component. But you can always pass functions from parent to child components, whereas the child components make use of these functions and the functions may change the state in a parent component above. Once the state has changed, the state is passed down as props again.

angularjs pass grandparent to grandson with components, Accessing parent, child, grandchild component variables in Angular , After How to pass data from parent component to grand-child component , Let's say we� The most common use case for passing arguments to your events is when you want a child component to be able to set a specific value for its prop. You never want to directly edit the value of a prop from the component itself. However, luckily we can use pass arguments with our custom events to make the parent component change values.

Comments
  • it is better to use Subjects in this case
  • But how to be sure that Parent 1 receives the value from Grandchild 1 and Parent 2 receives the value from Grandchild 2? Does not BehaviorSubject always return the last value?