Search code examples
javascripttypescriptgetuikit

Uikit Notification finish then navigate to another page

I want to popup a notification then navigate to the login page.

UIkit.notification({message: 'no access, please login again', status: 'danger'});
this.router.navigateByUrl('login'); // angular navigation by url

However it popups the message and navigate to the login page at the same time. What I want is to wait the notification closed then doing the navigation.

If we only have the first line code for the notification, the popup window will vanish in 5 seconds by default. In my code there are two lines, the popup window vanishes quickly then running the second line code.

Solution

  • You can achieve this with pure UIkit. Notification component triggers close event when closed, which you can use for custom function. To run the function only on the specific error notification, you can add your own custom class (login-error in my example).

    UIkit.notification({
  message: 'no access, please login again',
  status: 'danger login-error'
});


UIkit.util.on('.login-error', 'close', function() {
  console.log('Notification closed');
  //this.router.navigateByUrl('login'); // angular navigation by url
});
    <!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>