View does not change with subscribe on click action in Angular 11

Question

I have a notifications system to pop some messages. This code is inside a library use for differents projects.

To fire a notification I use a method inside a service interactiveUI like this :

this.interactiveUI.addNotification( 'NOTIFICATION_TITLE',
      'NOTIFICATION_DESC', true ); // true means 'must pop'

That works if I use this codeline inside a component like this :

async ngAfterViewInit() {
    this.interactiveUI.addNotification( 'NOTIFICATION_TITLE',
      'NOTIFICATION_DESC', true );
  }

But if I use it on a click action button, that does not work anymore. The notification is correctly loaded, I can get an alert inside the subscribe, but the view is never reload correctly.

<button (click)="runNotification()"> TEST </button>

 runNotification(){
      this.interactiveUI.addNotification( 'NOTIFICATION_TITLE',
      'NOTIFICATION_DESC', true );
 }

Notifications component

notifications.component.ts

@Component({
  selector: 'ui-notifications',
  templateUrl: './notifications.component.html',
  styleUrls: ['./notifications.component.scss']
})
export class NotificationsComponent implements OnInit {

  watcherSubscriptionForInteractiveUI: Subscription = Subscription.EMPTY;
  justPop: BehaviorSubject<boolean> = new BehaviorSubject( null );
  constructor( public interactiveUI: InteractiveService ) {}

  ngOnInit(): void {
    this.justPop.next(false);
    this.watcherSubscriptionForInteractiveUI = this.interactiveUI.notifications.subscribe(( notifications ) => {
      if ( notifications[ notifications.length - 1 ] !== undefined && notifications[ notifications.length - 1 ].pop ) {
        // alert('pop') /* show alert perfectly in any case */
        this.justPop.next(true);
        setTimeout(() => {
          this.justPop.next(false);
        }, 4000);
      }
    });
  }
}

notifications.component.html

<div id="notification-pop-wrapper" [class.show]="justPop.getValue()" >
  <ui-notification *ngIf="justPop.getValue() && interactiveUI.notifications.getValue()[interactiveUI.notifications.getValue().length - 1 ]"
            [title]="interactiveUI.notifications.getValue()[interactiveUI.notifications.getValue().length - 1 ].title"
            [description]="interactiveUI.notifications.getValue()[interactiveUI.notifications.getValue().length - 1 ].description"
  ></ui-notification>
</div>

this.justPop is always set but class.show is never updated on click action. Someone has an idea why that happens ?

are u in angular zone in this.interactiveUI.notifications.subscribe ? — Petr Averyanov, Nov 22 '22 at 20:55

score 0 · Answer 1 · answered Nov 23 '22 at 07:51

0

You can use startWith rxjs operator

this.watcherSubscriptionForInteractiveUI = 
    this.interactiveUI.notifications
           .pipe(startWith(false)).subscribe(....)

Or make the this.justPop.next(false); after subscribe

answered Nov 23 '22 at 07:51

Eliseo

50,109
4
29
67

I tried both without any effect. The only thing that works is : https://stackoverflow.com/questions/50519200/angular-6-view-is-not-updated-after-changing-a-variable-within-subscribe#60639074 but I think it is not the best performed way. – J.BizMai Nov 23 '22 at 12:42

View does not change with subscribe on click action in Angular 11

1 Answers1