Show loading animation in parent component depending on async values from child components

Issue

Suppose I have a parent component with two or more child components that both asynchronously fetch data from an API. I want to show a loading animation in the parent component until both child components are finished fetching the data. I had the idea to create a property loading: number on a shared service and increment/decrement the value from the child components. The parent component would have a *ngIf="loading === 0" to conditionally show the loading animation. However, as some might already suspect, this leads to changedAfterChecked error since I am updating the parent view from a child component.

I have already managed to get it working by manually updating the view but this is not an elegant solution. Hence, I wanted to ask if there is any other way or pattern to achieve the beforementioned.

Solution

You can use @Output to notify parent it child's current state. This will correctly trigger change detection withing angular component lifecycle. For example

@Component({
  selector: 'app-child-component',
  templateUrl: './child-component.component.html',
  styleUrls: ['./child-component.component.css'],
})
export class ChildComponentComponent implements OnInit {
  @Output()
  state = new EventEmitter<boolean>();
  constructor() {}

  ngOnInit() {
    let s = true;
    setInterval(() => {
      this.state.next(s);
      s = !s;
    }, 500);
  }
}


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;

  childStatus=false;
}

And parent template:

   Child state: {{ childStatus }}
  <app-child-component (state)="childStatus = $event"> </app-child-component>

https://stackblitz.com/edit/angular-ivy-hfhqap?file=src/app/app.component.html

Answered By - Antoniossss