How can I check if a particular div of a component is rendered in view?

Question

I am using the ngx-perfect scrollbar component in my project. The perfect scrollbar assigns the class 'ps ps--active-y' to the div it uses as the scrolling container. see this example from https://ngx-perfect-scrollbar-test.stackblitz.io/

I want to check if this div is rendered in the view and if once this is rendered then do some additional operations.

Here is what I've tried `

`<div class="list-wrapper">
  <perfect-scrollbar #perfectScrollbar>
    <div class="list-item" *ngFor="let item of listItems">
        <h3>{{ item.index }}</h3>
        <h3>{{ item.title }}</h3>
    </div>
  </perfect-scrollbar>
</div>`

export class ListComponent implements OnDestroy, AfterViewInit {
  @Input() dynamicComponent: boolean = false;
  @Input() deleteAfterSeconds: number = 5000;
  @Input() componentRef: ComponentRef<ListComponent>;

  @HostBinding('@fade') fadeIn: boolean = true;

  @ViewChild("perfectScrollbar",{static:true})
  perfectScrollbarRef: PerfectScrollbar;

 ngAfterViewInit(){
      console.log(this.perfectScrollbarRef);
  }

The issues that Im facing here is that

sometimes the ngAfterViewInit() logs the perfectScrollbarRef as undefined. I was able to get this to print the required value inside ngAfterContentChecked() but the official angular docs suggest to use ViewChild references inside ngAfterViewInit().
Is there a way I can subsribe to the changes made to its components dom or something and check consistently if the required div element is rendered or not. One possibility I have is to check with a mutation observer but Im wondering if there are any easier methods to achieve this.

How can I check if a particular div of a component is rendered in view?

0 Answers0