Angular How to call method from child after parent component template changes

Question

I have a parent component, it has a side menu and content. Inside the content, a child component is rendered using router-outlet.

|   menu  |         content               |
|         | |---------------------------| |
|         | |        child              | |
|         | |                           | |
|         | |        xterm              | |
|         | |                           | |
|         | |---------------------------| |

At the push of a button calls method

toggleMenu(){
    isCollapsed = !isCollapsed
    store$.dispatch(sidenavUpdated(data))
}

the menu collapses or expands

<mat-sidenav [fxFlex]="sidenavWidth" ... 
get sidenavWidth(){
     If(isCollapsed){
      return 40px
    }
   return 200px }

I should to wait for the content width to change and then in the child component, run the method to re-render the web shell (xterm.js). The child component is subscribed to changes in the store.

store$.pipe(...).subscribe (()=>{resizeTerm();})

In the debugger, the sequence of code execution is as follows

1. click -> toggleMenu()
2. store$.dispatch(...
3. in child store$.pipe(...).subscribe (()=>{resizeTerm();}) //get a notification from the store and start redrawing the web shell
4. [fxFlex]="sidenavWidth" //get width from sidenavWidth()

My web shell redraws before the parent template gets the new width for ".content" How can I wait for a change in the parent's html and then re-render mine web shell?

Answer 1

This problem can have two solutions

• calculate the time of collapsing menu as x and use this time as arg of debounceTime operator in subscribing the store

store$.pipe(debounceTime(x), ...)

• use ResizeObserver api for content element and check if the element has the desired size or not