Show notification then after 5 seconds navigation to other page

Question

I want to create a notification. After 5 seconds the notification should vanish then it goes to another page.

export class AppComponent  {
name = 'Angular 5';
constructor(private router: Router) {
  var notify = new Notification('', {body: 'test'});
  setTimeout(notify.close.bind(notify), 5000);
  this.router.navigate(['/page1']);
  }
}

However it navigates to the other page immediately; I can't see the notification.

Stackblize demo

Answer 1

export class AppComponent  {
name = 'Angular 5';

    constructor(private router: Router) {
      var notify = new Notification('', {body: 'test'});
      setTimeout(()=> {
         notify.close.bind(notify);
         this.router.navigate(['/page1']);
      }, 5000);
      }

}

Answer 2

From what I understood, you want to show the notification and on close of it redirect to a different page.

Try this:

 export class AppComponent  {
  name = 'Angular 5';
  constructor(private router: Router) {
      var notify = new Notification('', {body: 'This is a notification'});
      notify.onclose = (
          () => {
          setTimeout(() => {
            this.router.navigate(['/page1']);
          }, 5000);
        }
      );
    }
  }

Stackblitz Editor: https://stackblitz.com/edit/routing-example-x8hbhm

Stackblitz App url: https://routing-example-x8hbhm.stackblitz.io

You also might want to check if the notification permission was granted or not.

Example from https://developer.mozilla.org/en-US/docs/Web/API/notification

if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification("Hi there!");
  }

  // Otherwise, we need to ask the user for permission
  else if (Notification.permission !== "denied") {
    Notification.requestPermission().then(function (permission) {
      // If the user accepts, let's create a notification
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  }