Typescript:
countdown;
counter = 10;
tick = 1000;
this.countdown = Observable.timer(0, this.tick)
.take(this.counter)
.map(() => --this.counter)
Also in HTML:
<div>
<h1>Time Remaining</h1>
<h2>{{countdown | async | formatTime}}</h2>
</div>
How can I trigger an event when the counter reaches 0?
Give this a shot
this.timerStart = Observable
.timer(0, this.interval)
.take(10)
.filter(val => val === 0)
.do(() => {})
You might want to consider using this approach because of the take method
this.timerStart = Observable
.timer(0, this.interval)
.take(10)
.map(() => --this.counter)
.finally(() => {})
UPDATE For version 6 :
this.timerStart = timer(0, this.interval)
.pipe(
take(this.counter),
map(() => --this.counter),
finalize(() => /* your action */),
)
this.timerStart = timer(0, this.interval)
.pipe(
take(this.counter),
map(() => --this.counter),
filter(val => val === 0),
tap(() => /* your action */),
)
I have an array of Projects with multiple strings in the stack property const projects: IProject[] = [ {name: '', description: '', stack: {'php', 'sql'}} ] What is the best approach for defining the interface? ...
I have successfully implemented the code below and now I am attempting to convert it to Typescript. However, even though I can grasp the error to some extent, I am unsure of how to correct it. At present, I am allowing a component to have a prop called "i ...
I have implemented AngularFire in the following manner: constructor(private afDb: AngularFireDatabase) { allRRs$ = this.afDb.list(`research_reports-published/`).valueChanges(); } The variable allRRs$ is an observable that I am utilizing in my templat ...
I am looking to create a test portal that includes a simplified version of Postman as a page. This feature will allow me to send HTTP requests to third-party clients and receive responses. I plan to use the response values to perform additional functions. ...
I have a specific input setup in the following way: <form [formGroup]="loginForm""> <ion-input [formControlName]="'email'"></ion-input> In my component, I've defined the form as: this.log ...
I'm struggling to find the right words for this question. I've encountered an issue where I need to constantly check and update a complex state object within an interval loop in my program. To simplify, let's say it consists of just a counte ...
Check out this simple React component I created: import React, { ReactChild, ElementType } from 'react' import styled from '@emotion/styled' type WrapperPropsType = { size?: SizeType } type ButtonPropsType = { as?: ElementType< ...
Here is an example I am baffled by the fact that Material Table sorting does not properly arrange the table. I have created a stackblitz example to demonstrate this. Expected order - Sorting lowest IP first: "10.16.0.8" "10.16.0.16" & ...
While working on a website project using Next JS, I came across the challenge of displaying SVG icons stored in Sanity and dynamically changing their fill color. Is it possible to achieve this feature, such as changing the color when hovering over the icon ...
I have the following code snippet in my project: import NextLink from 'next/link' import ExternalLink from './External' type PropsType = typeof NextLink & { href: string children: React.ReactNode } export default function Link ...
A basic component is utilized to accept a configuration object as an input and utilize it to initialize certain values in the ngOnInit lifecycle hook. export class MyComponent implements OnInit { @input() config: ConfigObject; min: number; max ...
sendToSpecificRoom(message: any): void { if(message.roomName){ this.io.sockets.in(message.roomName).emit("eventSent", message); }else{ this.io.sockets.emit("eventSent", message); } } I need to send a message specifically to the ...
Depending on the value of userRole received from the header, I need to redirect to different user pages. angular.routing.ts { path: '', pathMatch: 'full', redirectTo: '/login' }, { path: 'user', loadChildren: &apo ...
In my TypeScript backend project with Node as the target runtime, I have a JSON file that is auto-generated within my repository. I use the following code to import the JSON file in order to get the type of the JSON object: import countries from '../g ...
Our team has developed a user-friendly application using Angular with 5 pages, each featuring a Google map. The main reason for choosing Angular was to minimize the number of Map calls per user session to just 1; previously in our javascript-based app, thi ...
Looking for the best approach to iterate through dynamically created forms using Yup? In my application, users can add an infinite number of small forms that only ask for a client's name (required), surname, and age. I have used Formik to create them ...
In my current project, I am developing an Angular 8 application using Reactive Forms. The form in question serves both create and update operations with a set of controls. Here is the code snippet for initializing the form: this.form = new FormGroup({ ...
Consider the following TypeScript function: export const foo = function(){ return { a: 1, b: true, c: 'bar' } }; If I were to import this function into another file: import {foo} from './foobar'; Is there a me ...
I am working with a table generated by ng2-smart-table. The data in the table can be in two states: Draft and Ready. I need to implement a condition where if the data.status = 'Draft', the actions column for CRUD operations is displayed, but if t ...
My angular 8 app with firestore, built using angularfirebase, is designed to work offline by enabling persistence on firebase. However, I am facing an issue where the local data doesn't update when changes are made in firestore itself or on another de ...