0

I have a component lets call it component A, in one module but using this component in the app root component template. This component A displays a button element using another component - let's call this component B.

In component A's template sits Component B and another Component - let's call this component C. Component C has *ngIf="show".

Component A's class declaration has an action method - let's call this method fetch() as well as the show property for the *ngIf. The show property is set to false. The fetch() method is then passed onto Component B (button component) where it is invoked on (click).

in the fetch method I am changing show from false to true. To my surprise I have come to notice that when this button component is clicked, in the class declaration of component A, the show property will change to true but is not picked up in the template for the ngIf.

As i was debugging on why it wasn't working, I added a button element below component B and added the (click)="fetch()".

This was successful and the change detection worked.

To my surprise why is it, when i pass the fetch method to Component B to invoke, the change detection doesn't work but when i invoke this same method using a button added in the template then it works.

I haven't worked with angular since version 5/6 and I have only just got back to it.

Next step is to try and make the show property static to the class.

I was expecting the initial implementation without having to use a button element to work but why doesn't it work.

Component B also belongs to a different module and not the same one as Component A.

Below is an image of the above

enter image description here

AT82
  • 71,416
  • 24
  • 140
  • 167
Chief
  • 854
  • 12
  • 27
  • The problem is (probably) that `this` is not preserved when executing the callback from Component B. Try defining it as an arrow function: `fetch = () => { ... }`. – ConnorsFan Feb 16 '19 at 20:14

1 Answers1

0

This turned out to be down to the "this" context. It was referring to the component that was invoking the callback instead of the parent component which defines the method.

So changed it to fetch = () => { ... } in the parent component as mentioned in the comments above.

Chief
  • 854
  • 12
  • 27