Unable to query or access ng-template contents inside the spec.ts file

Question

I am not able to test a ng-template data in my component which is rendered inside a mat-dialog pop-up.FYI I used fixture.detectChanges() also.

When i try to log the templateRef in spec.ts getting the nativeElement as a comment.

I would like a content projected dialog.

The html file is

 <div class="flex flex-column align-items-center justify-content-around">
    <button class="approval" (click)="onApproveClick()" mat-button mat-raised-button>Approve</button>
</div>

<ng-template #boomBarrierTemp>
        <div>
            <span class="header-text fw-700">Select Boom Barrier Gate</span>
        </div>
        <div class="flex middle-xs mt-30" style="justify-content: space-between;">
            <div>
                <p class="lable">Name</p> 
                <p class="truck-data">{{item?.name | uppercase}}</p>
            </div>
            <div>
                <p class="lable">Quantity</p>
                <p class="truck-data">{{item?.available_no}}</p>
            </div>
        </div>
</ng-template>

Spec.ts

  it('should show a model popup(Boom-barrier selection popup) on clicking "Approve" button.', async () => {
  
    const dialogRefSpyObj = jasmine.createSpyObj<MatDialogRef<GenericDialogComponent>>('MatDialogRef', ['afterClosed', 'close']);
    const genericDialogComponentMock = jasmine.createSpyObj('GenericDialogComponent', ['ngOnInit']);
    genericDialogComponentMock.content = null;
    dialogRefSpyObj.componentInstance = genericDialogComponentMock;
    dialogRefSpyObj.afterClosed.and.returnValue(of(true));
  
    dialog.open.and.returnValue(dialogRefSpyObj);
  
    fixture.detectChanges();
  
    const approveBtn = fixture.debugElement.query(By.css('.approval')).nativeElement;
    approveBtn.click();
    
    await component.onApproveClick();
  
    expect(component.onApproveClick).toHaveBeenCalled();
    expect(dialog.open).toHaveBeenCalled();
  
    fixture.detectChanges();
  
    const [templateRef, dialogConfig] = dialog.open.calls.mostRecent().args as [TemplateRef<any>, any];
  
    expect(templateRef).toBeTruthy();
    expect(dialogConfig).toEqual(jasmine.objectContaining({
      width: '750px'
    }));
    
    expect(dialogRefSpyObj.componentInstance.content).toBe(component.boomBarrierTemp);
    await fixture.whenStable()
    console.log(dialogRefSpyObj.componentInstance.content)
  });

  @ViewChild('boomBarrierTemp',{ static: false })boomBarrierTemp:TemplateRef<any>
 
  onApproveClick(){
    this.dialogRef = this.dialog.open(GenericDialogComponent, {
      width: '750px'
    });
    this.dialogRef.componentInstance.content = this.boomBarrierTemp;
  }

The generic dialog html

<div *ngTemplateOutlet="content" #template></div>

The Generic dialog ts
Here to while i am consoling getting nativeElement as comment

  @ViewChild ('template')template:TemplateRef<any>
  @Input() content: TemplateRef<any>;

  constructor(public dialogRef: MatDialogRef<GenericDialogComponent>) {}
  ngOnInit() {
    console.log(this.template);
  }