Angular subscribed to an Observable but not refresh / update

Question

I'm setting up a notifications feature to my Angular application.

In header:

The header is calling only one time after log-in, I have a badge with the number of unread notifications:

<button mat-icon-button>
    <mat-icon matBadge="{{unreadNotifications}}" matBadgeColor="red" matBadgeOverlap="true" matBadgePosition="below after">
        notifications
    </mat-icon>
</button>

And my controller:

notificationSub: Subscription;

ngOnInit() {
    this.notificationSub = this.notifService.getAsyncNotifsCount().subscribe((res) => {
        this.unreadNotifications = res;
    });
}

The notifications can be show in the notification page:

<div *ngFor="let notif of notifsBeforeRead" class="notif">
    <div class="notif-title">{{ notif.Subject }}</div>
    <div>{{ notif.Message }}</div>
    <div class="notif-date">{{ notif.Date | date : 'medium' }}</div>
</div>

And my controller:

notificationSub: Subscription;

this.notifService.apply({ collectionName: 'Links' }, myFilter);
this.notificationSub = this.notifService.getAsyncFilter()
  .subscribe((links) => {
    if (links.data && links.data.length) {
      // this.resultsLength = links.options.documents.total;
      this.resultsLength = 20;
      Array.prototype.forEach.call(links.data, (link) => {
        const notif = {};
        link.attributes.forEach((attr) => {
          notif['id'] = link._id;
          notif['attributes'] = link.attributes;
          link.attributes.forEach((att) => {
            notif[att.name] = att.value;
          });
        });
        if (Object.keys(notif).length) {
          notifications.push(notif);
        }
      });
    }
    this.notifsBeforeRead = notifications;
    this.notifications = _.cloneDeep(notifications);

  // Mark notifications as read
  this.updateReadNotif();
});

And my notifService:

@Injectable()
export class NotifService {
  filterSubject = new Subject<any>();
  notifsCountSubject = new BehaviorSubject<any>(0);

  apply(params = null, filter: any) {
    const _resource = this.resource;
    let targetURL = `${this.resourceApply}`;

    if (params) {
      targetURL += `?${queryParams(params)}`;
    }

    this.getData(targetURL, filter).subscribe((res) => {
      this.filterSubject.next(res);
      console.log(res.data);
      let unreadNotifs = 0;
      res.data.forEach((notif) => {
        notif.attributes.forEach((attr) => {
          if (attr.name === 'Lu' && attr.value === false) {
            unreadNotifs += 1;
          }
        });
      });
      this.notifsCountSubject.next(unreadNotifs);
    });
  }

  getData(targetURL, filter) {
    this.resource = targetURL;
    return from(super.create(filter));
  }

  getAsyncFilter() : Observable<any> {
    return this.filterSubject.asObservable();
  }

  getAsyncNotifsCount(): Observable<any> {
    return this.notifsCountSubject.asObservable();
  }
}

There isn't all the code but I guess you can help me with this only.

So when I go to the notifications page, the badge isn't updated.

For example: I've got 5 unread notifs.

• Badge in header = 5

I go notifications page so I pass in this code :

this.notifsCountSubject.next(unreadNotifs); // unreadNotifs = 0

But the badge in header isn't updated. I've subscribed to the subject, when I use .next(), all the subscribers should've update their data, am I right ?

Can you help me please, thanks you.

Answer 1

As we figured out, the problem was that it was 2 different instances of service, because it was in providers of module and in providers of component, so component got new instance of service each time.