Angular DOM 更新问题，直到加载子组件

Question

I am trying to start a loader (spinner) before loading a sub-component. I am setting the visibility of loader div to display block on click action of a button. And trying to stop the loader once sub-component is loaded completly, that is in ngAfterViewInit of sub-component.

But loader is never rendered.

And its not just about loader, if you update any DOM poroperties on click of the button, it wont be updated in UI.

I thought some problem in my application, so took an example from angular.io and updated it with the needed loader. Still it behaves the same.

Playground with tour of heros is in stackblitz for tetsing.

I also found a bug with ngAfterViewInit , but it was in NativeScript repository, so angular team had not paid any attention to it I hope.

Please inform me what is the right way to update DOM for these kind of cases or if it is a issue with angular I will raise with them.

In the stackblitz playground I had put a alert in ngAfterViewInit to varify if loader content is visible, actually if I run that project locally firefox is showing the loader with alert, after removing the alret firefox is also not able to show the loader.

Code Flow: dashboard is the component having loader div and click event to start the loader. hero-detail component's ngAfterViewInit is emitting a event to stop the loader.

Answer 1

Try to use "hidden" instead of ngIF ( [hidden]="heroDetail"). In short, ngIf will add or remove the element from DOM, then the DOM events will be not tracked as you expect. Hidden will hide or show the element via CSS keeping all its event listeners.

You can read more about in:

https://www.angularjswiki.com/angular/difference-between-ngif-and-hidden-or-displaynone-in-angular/