Angular can display text on hover based on the state shown in a <td> element

Working on an Angular 7 project, I have a <td> element where I display different colors to indicate the status of a task:

  • Red - Indicates 'Delayed'
  • Orange - Indicates 'In progress'
  • Grey - Indicates 'Rejected'

Currently, I am able to display these status colors successfully. Now, I want to enhance the user experience by adding text that appears when the user hovers over each status, explaining the meaning behind the color.

Here's the code snippet:

<td data-label="Status" class="cell status-cell">
   <span [style.backgroundColor]="getStatus(working_period)"></span>
     <p>Text on hover here</p>
</td>

I've written the TypeScript logic as well:

public getStatus(period: WorkingPeriod): string {
    if (+period.status !== 2) {
      return 'grey';
    }
    const time: number = +new Date() - +period.endDate;
    if (time > 2 * 24 * 60 * 60 * 1000) {
      return `red`;
    }
    return 'orange';
}

The issue I'm facing is aligning the text with the respective colors displayed. For example, I want 'In progress' below orange and 'Delayed' below red.

You can view my current layout in the screenshot below:

(I appreciate your patience as I continue to learn Angular)

Thanks in advance!

angulartypescript

Answer №1

Include a new member in your component class and update its value based on the status.

<td data-label="Status" class="cell status-cell">
   <span [style.backgroundColor]="getStatus(working_period)"></span>
     <p>{{hoverText}}</p>
</td>

hoverText: string;

public getStatus(period: WorkingPeriod): string {
  const time: number = +new Date() - +period.endDate;
  if (+period.status !== 2) {
    this.hoverText = "Rejected";
    return 'grey';
  } else if (time > 2 * 24 * 60 * 60 * 1000) {
    this.hoverText = "Delayed";
    return `red`;
  } else {
    this.hoverText = "In progress";
  }
  return 'orange';
}

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

Testing the functionality of an HTTP service in Angular 5 through unit testing

Testing a data service can be confusing with so many possibilities to consider. It's easy to feel overwhelmed. Consider this basic service: @Injectable() export class DataService { constructor(private _http: HttpClient) { } getData<T>(pa ...

angularunit-testing

create a fresh variable instead of appending it to the current object

I'm encountering an issue where a new array is supposed to be added on callback using props, but instead an empty variable is being added. Here's the code snippet: const [data, setData] = useState({ title: "", serviceId: "", serviceNa ...

reactjstypescriptecmascript-6next.js

Tips for arranging backend data horizontally within Bootstrap horizontal cards

After setting up my Angular application, I created a dashboard page and made API calls for dynamic signals (signal-1, signal-2, etc). To showcase this data, I decided to use Bootstrap horizontal cards. However, I'm facing an issue with displaying the ...

angulartwitter-bootstrapapibootstrap-4

Footer missing from Tanstack React table

Library Version: "@tanstack/react-table": "^8.2.6", I have been attempting to include footers in my table without success. Despite setting static footer text with a fixed value, I am unable to render any dynamic values similar to how h ...

reactjstypescriptreact-table

When requesting URLs on the server via Http, they must be in absolute form

Recently, I developed an Angular Universal application using Angular2 where I made a request to the /category service. this.hsService.getCategories(AppConstants.BASE_URL_GET_CATGORIES).subscribe( resp => { if (resp !== null) { console.log(& ...

node.jsangularangular-universal

The Mui datepicker displays the day and month in reverse order

Do you have trouble with date search filter using the mui datepicker component? It seems that when entering a date in the input and clicking on search, the day gets swapped with the month. For instance, if you input 03/05/2022, it returns Sat Mar 05 2022 ...

reactjstypescriptmaterial-ui

What causes the Cassandra client driver to provide more detailed information compared to cqlsh?

I'm currently utilizing the datastax nodejs-driver to retrieve information about a keyspace from cassandra. const results = await client.execute( ` DESC KEYSPACE ${keyspace} ` ); The method client.execute provides a comprehensive object containin ...

typescriptcassandradatastaxcqlcqlsh

Collaborating on data through module federation

Currently, I am in the process of developing a Vue.js and TypeScript application using Vite. In addition, I am utilizing the vite-module-federation-plugin for sharing code across different applications. My main inquiry revolves around whether it is possibl ...

typescriptvue.jsvitestorewebpack-module-federation

Sticky header in React data grid

Is there a way to implement a sticky header for a data grid in react? I have tried various methods but haven't been able to figure it out. Any suggestions would be appreciated. You can find my code sandbox example here. #react code export const Styl ...

javascriptreactjstypescript

Navigating the intricacies of debugging sub-domains in Angular projects using Visual Studio Code (VS

Currently working on a massive project utilizing micro-services. The unique design for clients/tenants requires visiting their specific subdomain to select a particular tenant. For example, https://ClientA.localhost:4200 and https://ClientB.localhost:4200. ...

angulartypescriptdebuggingvisual-studio-code

Arrange the items that are missing from Array B to be located at the bottom of Array A, organized in a file tree structure

I have two arrays containing different types of objects. Each object in the arrays has a title assigned to it. My goal is to compare these two arrays based on their titles and move any files that are not included in the bottom part of the fileStructure arr ...

javascriptarraystypescriptsorting

Is there a way to verify if a React hook can be executed without triggering any console errors?

Is there a way to verify if a React hook can be invoked without generating errors in the console? For example, if I attempt: useEffect(() => { try { useState(); } catch {} }) I still receive this error message: Warning: Do not call Hooks i ...

javascriptreactjstypescriptreact-hookstry-catch

How to handle an already initialised array in Angular?

I came across an interesting demo on exporting data to Excel using Angular 12. The demo can be found at the following link: This particular example utilizes an array within the component TypeScript file. import { Component } from '@angular/core' ...

angulartypescriptweb

Exploring the process of incorporating types for a Vue plugin

I am currently trying to integrate a self-made plugin for Vue with TypeScript. However, when I try to use the method from my vue prototype, I encounter an issue where my method $auth is not recognized on type 'myComponent'. I have also included ...

typescriptvue.jsvuejs2

Is it possible to use an Enum as a type in TypeScript?

Previously, I utilized an enum as a type because the code below is valid: enum Test { A, B, } let a: Test = Test.A However, when using it as the type for React state, my IDE displays an error: Type FetchState is not assignable to type SetStateActi ...

reactjstypescripttypesenums

Unable to create a connection to the server using websockets

Currently, I am working on a MEAN stack application. The communication between the client and server is handled through a combination of HTTP requests and websockets. Everything operates smoothly when running the application on localhost. However, upon at ...

node.jsangularwebsocket

Different types of subscriptions for forkJoin observable

I am currently making two API requests with typed responses and combining them using the Observable.forkJoin method. My goal is to store each of the results in separate typed variables. var observableOrganization: Observable<Organization> = this.get ...

angulartypescriptrxjsobservable

Is it possible to use the Optimistic Hook with boolean values?

I am facing an issue with a switch component where the checked value is updated only after refetching the data when the user is changed to an admin status. Currently, there is a delay when clicking the switch as it takes time to load and then updates. It ...

reactjstypescriptreact-hooks

Is angular.io an enhanced iteration of angularjs?

Is learning angular.io significantly different in terms of coding compared to AngularJS? Which one would be the better choice for me to learn and why? ...

angular

Guide on implementing Password Confirmation in Angular 7 User Registration

I am currently working on a project that involves creating a user registration form using Angular 7 for the frontend and Laravel 5.8 for the backend. While I have successfully implemented user password confirmation in the backend, I am facing some challeng ...

angularlaravelapi