Angular subscription change doesn't trigger view update

Question

I am having issues with change detection and I cannot figure out whats going wrong, or if I just do not understand Angular properly. I looked at the stackoverflow answers for similar issues but the methods didn't solve my problem.

I have a service that is storing a selection of emotions that I have 2 modal components subscribing to. I have one modal in which the user selects emotions, and then the modal uses the service to update the selected emotions. The second modal also subscribes to the selected emotions, and updates the list of emotions on its Class when it receives the update. I've tried several methodologies like detectChanges() and tick() to no avail. I know that subscription is working and the modal is receiving an updated list of emotions, but somehow change detection isn't working at all and a view update isn't being triggered. I can't figure out why manually triggering change detection isn't working, which makes me question my understanding. I thought if I updated this.emotions in the class, which the view depends on, that would trigger an update....

Service:

@Injectable()
export class BeforeFormProvider {
  selectedEmotions = new BehaviorSubject({});
  selectedDistractions = new BehaviorSubject({});

  constructor(private databaseProvider: DatabaseProvider) {
  }

  updateEmotions(emotions) {
    this.selectedEmotions.next(emotions);
  }

  updateDistractions(distractions) {
    this.selectedDistractions.next(distractions);
  }

}

Modal where change detection is not working : I'm only going to include the part of the Class where I have the updating logic. I have emotions as a property on the Class.

ngOnInit() {
    //automatically generate date/time to current for form
    this.date = this.datePipe.transform(new Date(), 'mediumDate');
    this.time = this.datePipe.transform(new Date(), 'shortTime');

    this.emotionsSubscription = this.bfProvider.selectedEmotions.subscribe(emotions => {
      this.emotions = emotions;
      this.ref.tick();
    });
    this.distractionsSubscription = this.bfProvider.selectedDistractions.subscribe(distractions => this.distractions = distractions);
  }

Modal HTML: The p tag is not updating, it never recognizes any change! I can't figure out what i'm doing wrong.

<ion-item detail-push (click)="openEmotionsList()">
   <h2>Emotions</h2>
   <p>{{emotions | getValues}}</p>
</ion-item>

Answer 1

I figured this out. I needed to make a new copy of the list before sending via .next() in the service. I was saving a reference to the object returned via subscribe in the Modals, and then sending a mutated version of the same object back with every update from the service, and therefore it didn't trigger a view update.

updateEmotions(emotions) {
  this.selectedEmotions.next({...emotions});
}

Answer 2

Instead of making a copy, look at your getValues pipe, make sure it is not set to pure:

@Pipe({
  name: 'getValues',
  pure: false
})