Jasmine Get Element is null

Question

I am working on an existing HTML form in Angular and I need to make a change and add a test.

I am showing content based on the below

        <div *ngIf="!showSkeletonRows">
            <ng-container *ngIf="alternateMessageKey; else defaultMessage">
                <ng-container
                    *ngIf="alternateMessageKey === 'dataTable.noDataToDisplayForAssetRequests'; then noDataToDisplayForAssetRequests"></ng-container>
            </ng-container>
        </div>
    

    <ng-template #noDataToDisplayForAssetRequests i18n="@@dataTable.noDataToDisplayForAssetRequests">
        <div class="mt-1 p-2">
            There are no Asset Requests linked to this Title Submission
        </div>
    </ng-template>

    <ng-template #defaultMessage i18n="@@dataTable.noDataToDisplay">
        <div class="mt-1 p-2">
            There is no data to display
        </div>
    </ng-template>

This is my test

describe('VsDataTableComponent', () => {
    let component: VsDataTableComponent;
    let fixture: ComponentFixture<VsDataTableComponent>;

    beforeEach(() => {
        console.log('Running my test');
        fixture = TestBed.createComponent(VsDataTableComponent);
        component = fixture.componentInstance;
        // Initialize the component with no data
        fixture.detectChanges();
    });

    it('should display the no data message when there is no data', fakeAsync(() => {
        // Arrange
        component.data = { items: [], metadata: { pagination: { totalCount: 0 } } };
        component.clientSide = true;
        fixture.detectChanges();

        // Act
        fixture.whenStable().then(() => {
            fixture.detectChanges(); // Update the view
            console.log(fixture.debugElement.nativeElement.innerHTML);
            // Assert
            expect(component.data.items.length).toBe(0);
            expect(component.showSkeletonRows).toBe(false);

            const emptyMessageElement = fixture.debugElement.query(By.css('.mt-1.p-2'));
            expect(emptyMessageElement).toBeTruthy(); // This fails and is null 
        });
        tick(); 
    }));

});

I see there are a few questions on here with similar problems, but I cannot get anything to work to fix this.

This is the error message when testing

Error: Expected null to be truthy. at at UserContext.apply (http://localhost:9876/karma_webpack/webpack:/projects/virtusales/shared/src/lib/vs-data-table/vs-data-table.component.spec.ts:905:41) at UserContext.apply (http://localhost:9876/karma_webpack/webpack:/node_modules/zone.js/fesm2015/zone-testing.js:2030:30) at _ZoneDelegate.invoke (http://localhost:9876/karma_webpack/webpack:/node_modules/zone.js/fesm2015/zone.js:372:26)