How to run function after a component became visible in Angular 8?

Question

I want to load datas only if the user see the specific component which load the datas. So don't load before the component is visible.

I have this template:

<button (click)="showMyCompontente()">Click me</button>
<app-other-component *ngIf="show"></app-other-component>

With this TypeScript code:

export class MyComponent implements OnInit {
  show = false;

  ngOnInit() {
  }

  showMyCompontente() {
    this.show = !this.show;
  }
}

And the point is here:

@Component({
  selector: 'app-other-component',
})
export class OtherComponent implements OnInit {

  ngOnInit() {
    this.load();
  }

  load() {
    // needs to load datas only if the user see the component
  }
}

How to achive in the OtherComponent to start the this.load() only if the component is visible to the user? I want to reload datas again if the user hide the component and show it agian.

I need a solution inside the component to detect itself is became visible or disappear. That's because I have many compontents, calling eachothers in many variations.

Which Angular lifecycle hooks fires only when the user shows the component?

Answer 1

I would try:

• Adding an input property with type of boolean to OtherComponent component.
• Passing value of show to the input property, then inside the OtherComponent component, use ngOnChanges to detect any change in the input property and call load() accordingly.