Errors when first initializing due to data not being ready Angular 5

Question

So I know what is causing the problem I'm just not sure how to fix it..

Basically I have a user service like so..

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Entry } from 'contentful';

@Injectable()
 export class UserService {
   private userProgressSource = new BehaviorSubject<Object>({});
   userProgress = this.userProgressSource.asObservable();

   updateUserProgess(progress) {
     this.userProgressSource.next(progress);
   }
}

then In my program page I run the updateUserProgess() with the users progress

now I have a header that uses that data and both the program page and the header are initialized at the same time so when the page first starts I get heaps of ProgramHeaderComponent.html:28 ERROR TypeError: Cannot read property 'week' of undefined and I know the reason this is happening is because the data hasnt loaded yet because when the data has finished loading I see it where I want it in my header and the errors stop.. How can I prevent the errors on startup?

programHeaderComponent

ngOnInit() {
this._UserService.userProgress.subscribe((progress) => {
  this.progress = progress;
  console.log(this.progress);
});
}

prorgramHeaderComponent.html

<p>You're up to Week {{progress?.fields.week}}: Step {{progress?.fields.sequenceOrder}}<i class="fa fa-chevron-right"></i>