Angular Component ViewChild object is null - rxjs

Question

I have below code written in Angular 10 with Rx.js and Nxdev.
I am getting object eventInfoCardStep2 & eventInfoCardStep3 as null due to which further code of downloading excel does not work.
If i comment below error giving lines then file get download but modal spinner does not stop.
this.eventInfoCardStep2.displaySpinner = false;
this.eventInfoCardStep3.displaySpinner = false;
export class EventInfoCardComponent
extends AbstractV2Component
implements OnChanges {
#Input() assetEventDetails: AssetEvent;
showEventInfoCard = true;
uploadedFileNameList: string[] = [];
uploadedFileList: TableDataRow[] = [];
eventBulkTransactionId = '';
displaySpinner = false;
constructor(
private store: Store<fromRoot.State>,
private stringProcessService: StringProcessService
) {
super();
}
}
import { Actions, ofType } from '#ngrx/effects';
import { filter, takeUntil } from 'rxjs/operators';
import { Subscription } from 'rxjs';
export class EventStepperComponent
extends AbstractV2Component
implements OnInit, OnDestroy {
#ViewChild('eventInfoCardStep2')
eventInfoCardStep2: EventInfoCardComponent;
#ViewChild('eventInfoCardStep3', { static: false })
eventInfoCardStep3: EventInfoCardComponent;
this.eventCardSubscriptions = [];
const subs1: Subscription = this.actions$
.pipe(
filter(
(data) =>
data.type ===
assetEventActions.AssetEventActionType
.DOWNLOAD_ASSET_EVENT_ATTACHMENT_FROMCARD_SUCCESS
),
takeUntil(this.unsubscribe$)
)
.subscribe(
(
action: assetEventActions.DownloadAssetEventAttachmentFromCardSuccess
) => {
this.displaySpinner = false;
this.eventInfoCardStep2.displaySpinner = false;
this.eventInfoCardStep3.displaySpinner = false;
if (action.response.size !== 0) {
const blob = new Blob([action.response], {
type: 'application/octatestream',
});
fileSaver.saveAs(blob, action.fileName.trim());
}
}
);
}