title: Angular - async/await Observable toPromise update broadcast new BehaviorSubject data return Promise
body: <p>I have a project with this code that I inherited and for the life of me, I cannot understand what exactly is going on and there are some bugs with the teacher profile so I'm trying to sort out what the developer may have been trying to do.  If you can please help review and provide any tips or issues that you see.  I would like to make this code follow best practices and hope to document for the next guys how to do it.</p>
  <p>So my questions are:</p>
  <ol>
  <li><p>Does it make sense to create a new BehaviorSubject upon each call to the getTeacherProfile(), getTeacherProfileInfo(), getTeacherProfileByProfileId() because doesn't that create a new variable and any previous subscribe won't be notified?</p>
  </li>
  <li><p>Would the correct best pattern be to initialize once in constructor like</p>
  </li>
  </ol>
  <pre><code>this.broadCast = new BehaviorSubject&lt;TeacherProfileModel&gt;();
  </code></pre>
  <p>and then in inside each method that wants to update, push, send any new data to call:</p>
  <pre><code>this.broadCast.next(data);
  </code></pre>
  <ol start="3">
  <li><p>Instead of a subscribe inside the getter methods of Promise .then() , isn't it standard practice to make all the .subscribe((data) =&gt; { from inside the ngOnInit() one time for the component life cycle?</p>
  </li>
  <li><p>Also there is no ngOnDestroy() or unsubscribe, which I believe is standard practice when subscribing to any BehaviorSubject because if you do not it can create memory leaks and unexpected results?</p>
  </li>
  <li><p>Could it be caused by the order in which the methods are called by the related code that is making an inconsistent user experience from the dependent code that is subscribing to BehaviorSubjects which may be changed/reassigned and forgotten causing unexpected and unpredictable results?</p>
  </li>
  </ol>
  <p>Thanks for your help in advance!</p>
  <h1>CODE EXCERPTS</h1>
  <p>teacher.service.ts</p>
  <pre><code>  async getTeacherProfile(): Promise&lt;TeacherProfileModel&gt; {
      if (this.teacherProfileId &gt; 0) {
        var data = await this.crudService.get&lt;TeacherProfileModel&gt;(&quot;/tProfile/GetTeacherProfileData&quot;,
          new HttpParams().set('teacherProfileId', this.teacherProfileId.toString())).toPromise();
        this.broadCast = new BehaviorSubject&lt;TeacherProfileModel&gt;(data);
        this.teacherProfile = data;
        this.personalizedURL = this.teacherProfile.PersonalizedUrl;
      }
      else {
        if (this.teacherProfileId === 0) {
          this.initialiseTeacherProfile();
          this.commonService.isDefaultImageFlag = true;
        }
        this.broadCast = new BehaviorSubject&lt;TeacherProfileModel&gt;(this.teacherProfileData);
      }
  
      return this.teacherProfile;
  }
  
  async getTeacherProfileInfo(url: string): Promise&lt;TeacherProfileModel&gt; {
      var data = await this.crudService.get&lt;TeacherProfileModel&gt;(&quot;/teacherProfile/GetTeacherProfileInfo&quot;,
        new HttpParams().set('personlizedUrl', url)).toPromise();
      this.broadCast = new BehaviorSubject&lt;TeacherProfileModel&gt;(data);
      this.teacherProfile = data;
      this.personalizedURL = this.teacherProfile.PersonalizedUrl;
      return this.teacherProfile;
  } 
  
  async getTeacherProfileByProfileId(teacherProfileId:any): Promise&lt;TeacherProfileModel&gt; {
      this.teacherProfileId = teacherProfileId;
      this.imageUrl = localStorage.getItem(&quot;userImageUrl&quot;);
    
      var data = await this.crudService.get&lt;TeacherProfileModel&gt;(&quot;/teacherProfile/GetTeacherProfileData&quot;,
        new HttpParams().set('teacherProfileId', this.teacherProfileId.toString())).toPromise();
      this.broadCast = new BehaviorSubject&lt;TeacherProfileModel&gt;(data);
      this.teacherProfile = data;
      this.personalizedURL = this.teacherProfile.PersonalizedUrl;
      return this.teacherProfile;
  }
  </code></pre>
  <p>profile.component.ts</p>
  <pre><code>ngOnInit() {
      this.teacherService.getTeacherProfile().then((response: any) =&gt; {
           this.teacherService.broadCast.subscribe(data =&gt; {
                if(data !== undefined) { 
                     //do something  
                }
           });
      });
  }
  </code></pre>
  <p>teacher-profile-edit.component.ts</p>
  <pre><code>
    previewChanges() {
      this.commonService.userProfilePic = localStorage.getItem('userImageUrl');
      this.commonService.isStudentUser = false;
      this.teacherService.broadCast.next(this.teacherProfile);
    }
  
  
    private getTeacherProfileData() {
      this.teacherService.getTeacherProfile().then((response: any) =&gt; {
        this.teacherService.broadCast.subscribe(data =&gt; {
          if(data !== undefined) {
            this.teacherProfile = data;
            this.onProfileStatusChange(this.teacherProfile.IsProfileStatusPrivate);
            this.shortIntroLength = this.introLength - data.ShortIntroduction.length;
            if (data.TeacherQualifications.length === 0) {
              this.addQualification();
            }
          } else {
            var err = 'Error'; this.toastr.error('Oops! Something went wrong! '+err); throw err;
          }
        });
      });
    }
  
  </code></pre>