Ufdjrw

I have a button that allows users to turn on notifications

(no annoying pop-up at an unexpected time)

<span *ngIf="!showButton">
<div class="notificationsMsg">notificationMessage</div>
</span>
<span *ngIf="showButton">
<button mat-stroked-button
 id="sendButton"
 (click)="enableNotifications()">Enable Notifications</button>
</span>

When the button is clicked

I display the Chrome Allow Notifications dialog

And respond to the user's action

Then hide the button (you cannot show the dialog twice) and show a message

If the user selects BLOCK or ALLOW

Everything works as expected

Button Hidden, Message shown

If the user closes the dialog with the X

My code fires, but the page is not updated until you manually click on it

Is there something I could do to in my code give the page focus again to hide the button and show the message?

// the button was clicked
enableNotifications() 

Notification.requestPermission(perm => 
 if (perm === 'granted') 
 console.log('allow clicked');
 this.notificationMessage = 'Woo Hoo';
 else if (['default', 'denied'].indexOf(perm) > -1) 
 console.log('block clicked or dialog closed');
 this.notificationMessage = 'DENIED';
 
 this.showButton = false;
);

Chrome Version 72.0.3626.121 (Official Build) (64-bit)

You must update your component variables within Angular zone.

import Component, OnInit, NgZone from '@angular/core';

@Component(
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
)
export class AppComponent implements OnInit 
 name = 'Angular';
 notificationMessage = '';
 showButton: boolean;

 constructor(private zone: NgZone) 

 ngOnInit() 
 Notification.requestPermission(perm => 
 if (perm === 'granted') 
 console.log('allow clicked');
 this.zone.run(() => 
 this.showButton = false;
 this.notificationMessage = 'Woo Hoo';
 );

 else if (['default', 'denied'].indexOf(perm) > -1) 
 console.log('block clicked or dialog closed');
 this.zone.run(() => 
 this.showButton = false;
 this.notificationMessage = 'Denied';
 );
 

 );
 

Live Demo