I am looking to alter the text 'Hello' to appear in green after one hour has passed, and then change to red after two hours have passed, all through the use of Angular 5

I have successfully created a countdown time ticker using Angular 5. My goal is to update the text 'HELLO' every hour until 2 hours from the start time. Specifically, I want the text color to change to green after the first hour interval and then to red after the second hour.

There is a minor issue that I am currently facing. When I set the end date as 19/12/2018, the timer shows negative time after midnight (12 AM) on the same date - 19/12/2018.

You can view my code at the following link:

https://stackblitz.com/edit/angular-d1fqg5?file=src%2Fapp%2Ftime-ticker.component.ts

angulartypescript

Answer №1

The time input lacks the necessary time component, leading to a negative value. Make sure to include the time along with the date.

<timer enddate="' 12/19/2018'"></timer>

An issue with this format is that it will default to 12/19/2018 00:00:00 if today's date is also 12/19/2018 according to your programming logic.

this._diff = Date.parse(this.enddate) - Date.parse(new Date().toString());

This calculation results in subtracting 12/19/2018 00:00:00 from 12/19/2018 01:23:11.

// Keep in mind that new Date() includes the current time as well

Therefore, the resulting difference is negative.

In terms of styling, make use of 

<h1 [ngStyle]="{'color':_hours>=2?'green':'red'}">Hello</h1>

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

Switch the orientation of the content flow in bootstrap columns from horizontal to vertical

I am currently working on a file explorer project and I have run into an issue with the layout. My goal is to create a layout similar to Windows file explorer, where files are displayed vertically. However, my current code is arranging them horizontally li ...

twitter-bootstrapangularresponsive-designresponsive

FabricJS Canvas with a React DropDown Feature

While I have successfully created a TextBox on FabricJS Canvas, creating a Dropdown component has proven to be a challenge. The fabric.Textbox method allows for easy creation of text boxes, but no such built-in method exists for dropdowns in FabricJS. If y ...

javascriptreactjstypescriptfabricjs

Designing a visual showcase with interactive tab links for image selection

I have been working on developing an Angular component that simulates a tab gallery functionality, inspired by this example. Below is my HTML structure: <div class="gallery-container"> <div class="display-container"> ...

htmlangulartypescript

Angular4 Error: Unable to link to 'ngClass' as it is not recognized as a property of 'input'

Currently, I am facing an issue in my project where I am utilizing lazy loading. Specifically, within my registration module, I am attempting to utilize the [ngClass] directive to append an 'invalid' class when there are validation errors present ...

angulartypescript

What is the best way to integrate postcss/autoprefixer with Angular?

I recently went through #1521 regarding the usage of postcss/autoprefixer, but I'm still confused. Should I simply do npm install autoprefixer --save-dev? Is this the correct approach? Despite reading the postcss/autoprefixer documentation, I am st ...

angularpostcssautoprefixer

Discovering the Best Way to Display Node.js API Errors in an Angular Application

When encountering an error in my Node.js application, I handle it like so: app.get('/api/login', (req, res, next) => { //... return res.status(400).send({ isSuccess: false, errors: ["error 1", "error 2"] }) }) Now ...

node.jsangularangular-httpclient

Could we apply 'ngZone: 'noop' specifically to a function or component in Angular?

I am currently utilizing a third-party library to create PowerPoint presentations in Angular (Version 5). The third-party library makes numerous asynchronous calls and promises, causing zone.js to keep track of more than 50 loops running simultaneously. Th ...

angular

Is it possible to activate an "Add More" button when the user has only filled out 4 out of the 5 required fields in the form?

My Angular 5 form is being populated with data from a json clob stored in a database table. Out of the 10 fields on the form, 6 are required. These 10 form fields are dynamically generated in a loop. I have successfully implemented functionality to enable ...

angular

Troubleshooting: Issue with implementing BehaviorSubject and async pipe in Angular component extension

While working on my code, I encountered an issue where I couldn't get the parent component's async pipe to trigger from a child component in order to update the view. To better explain this problem, let me show you a simplified version of my code ...

angularinheritancebehaviorsubjectasync-pipe

Guide on Reacting to an Occurrence in Angular

I have a scenario where an event is triggered every 10 seconds. After subscribing to the event on the receiving end, I need to figure out how to send data back to the class responsible for emitting the event. constructor(@Inject(ABC.XYZ) private events: ...

angulartypescriptevents

What are the steps to globalize the ng-bootstrap datepicker?

For my current project, I am utilizing the ng-bootstrap datePicker component. The demo for my simple datePicker widget can be found here. However, I am now seeking to internationalize it by setting it to use the Russian language. Any assistance with this ...

javascriptangulartypescriptdatepicker

Ways to eliminate the excess margin of ng-container from the webpage

When controlling two mat tabs with a statement, I encountered an interesting issue. Both mat-tab elements contain a card-list and are controlled with a statement in ng-container. Strangely, on the first tab, the card has a slight margin from the top when I ...

javascriptcssangular

Leveraging RouterModule to direct to a single component through the utilization of dual routes

I have a component called SportComponent that shows a list of competitions for a specific sport. I've created a Routes array like this: export const appRoutes: Routes = [ { path: 'sport/:id', component: SportComponent } ]; In my app.ht ...

angularangular2-routing

Struggling to showcase a recently created array in a function while using Angular Material 2

I'm currently working on developing a Barbell plate calculator that allows users to input the desired total weight and barbell weight, after which the application will show them the weights needed on each side. Although it's in its early stages, ...

arraysangularloopstypescriptangular-material2

How can Array<T> in Typescript be used to dynamically determine and generate a new instance of T?

My challenge involves managing multiple typed Arrays containing different objects. I am searching for a way to create a function that can add a new blank object to any array, as long as the type has an empty constructor available. Being new to Angular 2 a ...

arraysangulartypescript

What is the best way to incorporate a formArray into a formGroup?

Before anything else, I want to apologize for any errors in my English. I seem to be having trouble adding an array field to a formGroup. My issue arises when attempting to use the push method to add a formArray to my rate formGroup. It appears that the ...

javascriptangulartypescriptangular-reactive-forms

My PrimeNG styles went missing after updating from version 9 to 10

After upgrading from PrimeNG 9 to PrimeNG X, I noticed that the styles are broken. The ui-something styles have been renamed to p-something. Despite no errors in the console, some components (such as p-inputNumber) show improved behavior, indicating that t ...

angularprimeng

When trying to reference a vanilla JavaScript file in TypeScript, encountering the issue of the file not being recognized

I have been attempting to import a file into TypeScript that resembles a typical js file intended for use in a script tag. Despite my efforts, I have not found success with various methods. // global.d.ts declare module 'myfile.js' Within the re ...

javascriptreactjstypescriptreact-typescript

Issue encountered during unit testing: "Error occurred: 'Uncaught (in promise) SyntaxError: Unexpected token o in JSON at position 1'"

I am encountering an issue while trying to perform unit testing on a service. The error that I am seeing when running the test is: Uncaught (in promise) SyntaxError: Unexpected token o in JSON at position 1 at MapSubscriber.project (auth.service ...

jsonunit-testingangularmocking

A guide on how to bring a TypeScript class into another TypeScript class

I find myself struggling more than necessary with this task. Working with Ionic 3/Angular, I began creating a component and realized it wasn't exactly what I needed. Essentially, the class simply triggers an Ionic popup and, if the user clicks ' ...

angulartypescriptionic-framework