Is there a way to showcase a countdown timer on an Angular Toaster?

I am utilizing the ng-Idle and Angular Toaster modules in my project. I aim to exhibit a toaster notification during the IdleWarn event of ng-idle, along with the countdown value.

$scope.$on('IdleWarn', function(e, countdown) {
      console.log("Timeleft: " + countdown);
      toaster.warning('Title', '<section>' + countdown + '</section>', 0, 'trustedHtml', undefined, undefined, true, undefined, undefined);
    }

Currently, the toaster only displays a static countdown value. Is there a way I can implement a countdown timer to show the countdown in real time within this toaster notification?

javascriptangularjs

Answer №1

I was able to find a solution by directly modifying the message property. Make sure you have the latest version of angular-toaster installed (currently using v.2.1.1).

let sessionToast;
$scope.toastr = // Provided by angularJS

$scope.$on('IdleWarn', function (e, countdown) {

if (sessionToast) {
    sessionToast.scope.message = countdown + ' seconds';
    sessionToast.scope.$digest();
}
else {
    sessionToast = self.toastr.warning(countdown + ' seconds', 'You will be logged out due to inactivity in:', {
        timeOut: 0,
        preventDuplicates: true,
        onHidden: () => {
            sessionToast = undefined;
        }
    });

}


});

$scope.$on('IdleEnd', function () {
    $scope.toastr.clear();
});

$scope.$on('IdleTimeout', function () {
    // perform logout
    $scope.toastr.clear();
    // Optionally display a message stating that you have been logged out.
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vue3 - Implementing a seamless communication channel between two child components

Vue 3 has brought about changes in my component structure, as shown below: https://i.sstatic.net/bgtPB.png In this setup, ChildA can communicate with ChildB and requires ChildB to update its state accordingly. In Vue 2, I could send an event from ChildA: ...

javascriptvue.jsevent-handlingvuejs3

Tips for choosing between options in JavaScript and AngularJS

How can I choose the appropriate <select> tag option using JavaScript or AngularJS in the backend? Hint: I receive data from an API service and populate a form for editing. Assuming the gender is currently set as Male in the database, how can I disp ...

javascriptangularjs

AngularJS Input field fails to update due to a setTimeout function within the controller

I am currently working on a project that involves AngularJS. I need to show a live clock in a read-only input field, which is two-way bound with data-ng-model. To create this running clock effect, I am using a JavaScript scheduler with setTimeout to trigge ...

javascriptjqueryhtmlangularjssettimeout

Button for liking posts on Facebook made of titanium

I am attempting to publish a like for a page from my Titanium Alloy application. var fb = require('facebook'); fb.appid = "1234567890"; fb.permissions = ['public_profile', 'email', 'publish_actions']; fb.addEventLi ...

javascriptandroidtitaniumfacebook-like

Inside the function() in angular 2, the value of 'this' is not defined

I've integrated a UIkit confirmation modal into my app. However, I'm encountering an issue when trying to click the <button> for confirmation. The this inside the function is showing up as undefined. Here's the snippet of code in quest ...

javascriptangulartypescriptecmascript-6

Instructions on utilizing type interfaces for prop drilling in my React Typescript counter

I am currently developing a basic counter app to monitor my progress in a digital card game that I enjoy playing. While attempting to pass props from the parent component to the child component, I encountered an issue where the props were not being success ...

javascriptreactjstypescript

Ways to turn off JavaScript when reaching a certain breakpoint, similar to a media query

I am facing an issue with my <header> and <nav> blocks which are impacted by JavaScript. Is there a way to create a JavaScript solution similar to a media query that would deactivate this JavaScript code if the window width is less than or equa ...

javascriptjqueryhtmlcss

I am encountering an error when trying to fetch a JSON response from a PHP script, even though I am able

Below is the Javascript code I am using to initiate an AJAX call from a PHP file: $(document).ready(function(e) { $(function(){ $.ajax({ type:'GET', dataType: 'jsonp', data: { ...

javascriptphpjsonajax

What is the best way to showcase all menu and submenu items in separate dropdown lists?

Having trouble with my code, it's not functioning properly. I can't pinpoint the error. The menu displays correctly but the submenu isn't showing up under specific menus. Here is the code snippet: ##Table: menus## id name ...

javascriptphpajaxlaravellaravel-5

Pressing the submit button within a form in Ionic2 triggers the Ion-Input onSubmit event

In my form, there is an ion-button and an ion-input included. The ion-button is not meant for submitting the form. When I try to edit a value in the input field and press "ok", I expect the keyboard to hide. However, the ion-button reacts to this event an ...

javascriptiosangularjsionic2

Challenges encountered when using random values in Tailwind CSS with React

Having trouble creating a react component that changes the width based on a parameter. I can't figure out why it's not working. function Bar() { const p =80 const style = `bg-slate-500 h-8 w-[${p.toFixed(1)}%]` console.log(styl ...

javascriptreactjstailwind-css

LazyTreeGrid from Dojo encounters issues with paginating children while using QueryReadStore

Currently, I am experimenting with the LazyTreeGrid implementation in Dojo and have encountered an issue. When LazyTreeGrid is paired with LazyTreeGridStoreModel and QueryReadStore for pagination of children nodes, errors sometimes arise. I attempted to l ...

javascriptajaxdojotreegrid

The series in angular-chart is not displayed at the top as shown in the documentation

angular-chart.js provides an example of a bar chart, which can be found here. Using this as a foundation, I made some modifications to the js and markup code like so. HTML <body ng-app="app"> <div class="row"> <div class="col-m ...

javascriptangularjschart.js

What is the optimal method for transmitting both an image and JSON data to my express server?

Hey there! So I've set up a MongoDB database and I'm using Mongoose to work with it. Here's the model I have for my product: const productSchema = new Schema({ name: { type: String, required: true}, description: { type: String, required ...

javascriptreactjsmongodbexpressmongoose

What is the limitation in transmitting data as a JavaScript object rather than a JSON object?

As a newcomer to expressjs, I recently developed an application using it. Interestingly, when I send data in JSON format through POSTMAN, the application successfully returns the data. However, when I try to send data as a JavaScript object in the request ...

javascriptjsonnode.jsexpressserverside-javascript

The JavaScript array on its second usage had a length of '0', yet it still contained objects within it

About the Task: This task involves working with two arrays: arrNumber, which is a number array, and arrString, which is a string array. The goal is to create a list of objects using the values from arrNumber, where the object keys are numbers or characte ...

javascriptarrays

Create a Buffer that includes all the characters of the alphabet when converted to

My current project involves using Node.js to generate secure, random tokens. Here is a snippet of the code I'm using: crypto.randomBytes(32).toString("hex"); // dd89d6ab1a7196e8797c2da0da0208a5d171465a9d8e918d3b138f08af3e1852 Although this method wo ...

javascriptnode.jssecurityrandomcryptography

Exploring Angular and Node.js to Retrieve Image Dimensions

I'm struggling to figure out the most effective method for determining the image dimensions or naturalWidth of images based on their URL, usually found in the src attribute of an <img> tag. My objective is to input a URL of a news article and u ...

javascriptnode.jsangularjsajax

Tips on setting an expiration time for verification codes in a Node.js environment

What is the best way to implement an expiration time for this verification code? I need it to be deleted from the database after 10 minutes. var fourcode = Math.floor(1000 + Math.random() * 9000); app.post("/sendforgetpassword", async (req, re ...

javascriptmysqlnode.js

Guide to iterating through different endpoints in a predetermined sequence

I am facing a challenge with testing various endpoints using different login credentials. When looping through the endpoints, the results are not appearing in the sequential order due to asynchronous nature. My goal is to iterate through each endpoint wit ...

angularjsangulartypescript