I’m calling an API in ngoninit to get data in form of an array to render it in tabular format using *ngFor , everything works fine about it but i’m also using ngx-guided-tour for the same component and it works but Undefined nativeElement error appears in browser , i’m using html ids as guided tour’s steps selector , if i reload the same page and then try to start tour , it doesn’t show that error but if i switch to some other component from sidebar and come back to the same one and then again try to start tour , it shows me the same error in browser “undefined nativeElement”

this is the component.html code snippet

<div class="full-doc-container" *ngFor="let doc of documentList; let i = index">
                    <div class="document-container">
                        <div class="document-container-name">
                            <mat-icon class="font40">description</mat-icon>
                            <p class="docname">{{doc.doc_filename ? doc.doc_filename : "--"}}</p>
                            <!-- <mat-chip class="docsize">9 MB</mat-chip> -->
                        </div>
                        <div class="document-container-otherinfo">
                            <mat-card class="createdByInfo mat-elevation-z0">
                                <mat-icon class="account-icon">account_circle</mat-icon>
                                <div class="createdByInfo-title">
                                    <mat-card-title style="font-size: 14px;">{{doc.lastModifiedBy ? doc.lastModifiedBy.name : "--"}}</mat-card-title>
                                    <mat-card-subtitle style="font-size: 10px;">{{doc.updatedAt ? doc.updatedAt : "--"}}</mat-card-subtitle>
                                </div>
                            </mat-card>
                        </div>
                        <div class="document-container-action">
                            <button mat-stroked-button type="button" class="custom-stroked-button"
                                matTooltip="Download" (click)="onClickDownloadDocument(doc)" id="downloadDoc{{i}}">
                                <mat-icon>download</mat-icon>
                            </button>
                            <button mat-stroked-button type="button" id="viewDoc{{i}}" class="custom-stroked-button" matTooltip="View" (click)="onClickViewDocument(doc)" [disabled]="doc.fileExtention === '.pdf' ? 'false':'true'" >
                                <mat-icon>visibility</mat-icon>
                            </button>
                            <button mat-stroked-button type="button" id="deleteDoc{{i}}" class="custom-stroked-button" matTooltip="Delete" (click)="onClickDeleteDocument(doc)">
                                <mat-icon>delete</mat-icon>
                            </button>
                            <button mat-stroked-button type="button" id="continue{{i}}" class="custom-stroked-button"
                                matTooltip="Initiate" (click)="onClickContinue(doc)" [disabled]="doc.fileExtention === '.pdf' ? 'false':'true'">
                                <mat-icon>sim_card_download</mat-icon>
                            </button>
                        </div>
                    </div>
                    <mat-divider></mat-divider>
                </div><ngx-guided-tour></ngx-guided-tour>

this is the component.ts code snippet :

`

ngAfterViewInit(): void {
        this.createGuidedTour();
        this.cdref.detectChanges();} createGuidedTour(){
    this.guidedTour = {
      tourId: 'tour',
      useOrb: false,
      skipCallback: (stepSkippedOn: number) => {
        console.log('skip callback called');
                this.dialog.closeAll();
      },
      completeCallback: () => {
            console.log('Complete callback called');
                    this.dialog.closeAll();
      },
      steps: [
        {
          title: 'Search document',
          selector: '#searchBox',
          content: 'Type anything to search related documents.',
          orientation: Orientation.BottomRight,
        },
        {
          title: 'Download document',
          selector: '#downloadDoc0',
          content: 'Click this button to download a saved document.',
          orientation: Orientation.TopRight,
        },
        {
          title: 'View document',
          selector: '#viewDoc0',
          content: 'Click this button to view a saved document.',
          orientation: Orientation.TopRight,
        },
        {
          title: 'Delete document',
          selector: '#deleteDoc0',
          content: 'Click this button to delete a saved document.',
          orientation: Orientation.TopRight
        },
        {
          title: 'Continue to DDE process',
          selector: '#continue0',
          content: 'Click this button to use a saved document to initiate DDE.',
          orientation: Orientation.TopRight
        }
      ]
    };
    this.guidedTourService.startTour(this.guidedTour);
  }

`

error i’m getting is :

enter image description here

i don’t want solutions with setTimeout()