Tracking a change in a variable in Angular

Question

I have a component with a single child component which I cannot access and change to code to. In order to make something work I need to access a variable inside the child component onInit of the parent component, however the child component is always late. Is there a way for me to subscribe to the variable (I've tried with RxJS, however I had no luck, maybe I just did something wrong). I used the view child and I can access the variable later, however onInit it is still undefined, is there a way for me to wait for it inside the onInit and then call the rest of the functions?

@ViewChild("test") test;
 ngOnInit() {
    
    // console.log(this.test.model.test1);
    // const subject = new BehaviorSubject(this.test.model.test1);
    // subject.subscribe(console.log);
    
    // this.test.model.test1.toPromise().then(res => {console.log(res)});
  }

kvetis · Accepted Answer · 2021-09-16 14:55:54Z

2

You can only read child data after the view has been checked, so use ngAfterViewInit instead of ngOnInit.

But you cannot use the data from child in template, because the template has already been checked so the changes won't propagate into the view. You'd have to call change detection manually.

answered Sep 16, 2021 at 14:55

kvetis

7,4202 gold badges33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chund · Accepted Answer · 2021-09-17 09:14:10Z

Your problem:

The child component will only be initialized once the template of your parent component was initialized like @kvetis mentioned. Therefore the earliest you can expect anything from your child is in your parents afterViewInit()-life cycle hook.

Generall Communication between child and parent

Generally you would use the @Output decorator on a childs property which can then emit either an event or a value (which is where rxjs might join the picture). And bind to that output in your parents template:

child.ts

...

@Output
_model = new Subject<MyModelType>();

...

ngOnInit() {
  someLogic();
  this.model.next(whatEver);
}
...

parent.html

...
<child-selector (_model)="handleChildValue($event)">
...

parent.ts

...

handleChildValue(model: MyModelType) {
  doStuffWithModel();
}

...

Alternatively your can use an EventEmitter instead of a Subject.

Collectives™ on Stack Overflow

Tracking a change in a variable in Angular

2 Answers 2

Comments

Your problem:

Generall Communication between child and parent

child.ts

parent.html

parent.ts

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Your problem:

Generall Communication between child and parent

child.ts

parent.html

parent.ts

Comments

Your Answer

Sign up or log in

Post as a guest

Related