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

What is the process for verifying that a p-datatable has been successfully generated on the page?

Imagine having a parent component and a child component. <button (click)="downloadReport()">Download Report</button> <app-child-component [reportMode]="reportMode" (onReportModeReady)="onReportModeReady"> </app-child-component> I ...

angularprimeng-datatable

Tips on Identifying the Category

I am currently studying TypeScript. Recently, I have been using Axios to fetch API data, and then I stored the returned value in a useEffect hook. However, when trying to display it on the screen, I encountered an error stating that there is no 'name ...

reactjstypescript

"Encountering Devextreme Reactive Errors while navigating on the main client

Attempting to integrate Devextreme with Material Ui in my Typescript React app has been a challenge. Despite following the steps outlined in this documentation and installing all necessary packages, I am encountering issues. I have also installed Material ...

reactjstypescriptmaterial-uireactive

Error Message: The Reference.update operation in Angular Firebase failed due to the presence of undefined value in the 'users.UID.email' property

Having recently started to use the Firebase database, I encountered an issue while trying to update the UID to the Realtime Database during signup. The error message displayed was: Error: Reference.update failed: First argument contains undefined in prop ...

angulartypescriptfirebasefirebase-realtime-database

What is the best way to access a class's private static property in order to utilize it for testing purposes?

Hello, I am currently a beginner in TypeScript and unit testing, so this inquiry may seem elementary to those more experienced. I am attempting to perform unit testing on the code provided below using sinon. Specifically, I am interested in testing whethe ...

node.jstypescriptunit-testingsingletonsinon

Exploring the capabilities of automation testing with charts.js and the latest version of Angular

While working on my testing automation for charts.js, I utilized the ngContext object to retrieve data with this code snippet: document.getElementsByTagName('chart-dataset')[0].__ngContext__. However, since upgrading to angular 14, it seems that ...

javascriptangularchart.js

Having an issue where the Material Angular 6 DatePicker is consistently displaying my selected date as one day earlier

I've encountered a strange issue with the current version of the Material Angular DatePicker. After upgrading from A5 to A6, it started to parse my date one day earlier than expected. You can see an example of this problem here: https://stackblitz.com ...

angulartypescriptdatepickerangular-material

Set up Angular 2 Universal on your system

Update: I attempted to set up Angular 2 Universal following this guide, but encountered errors when executing the command below. Here is the command I ran: typings install node express body-parser serve-static dexpress-serve-static-core mime --global -- ...

node.jsangularexpresswebpack-dev-server

A custom Typescript type for immutable values within an object

I am struggling with finding the right data type for my function, where I need to work with static types. I have experimented with Type, interface, class, Record, and others, but none seem to fit perfectly. GEOLOCATIONS is a constant record that maps cou ...

typescripttypes

Type inference and the extends clause in TypeScript 4.6 for conditional types

My focus was on TypeScript 4.7 when I created the following types: const routes = { foo: '/foo/:paramFoo', bar: '/bar/:paramFoo/:paramBar', baz: '/baz/baz2/:paramFoo/:paramBar', } as const; type Routes = typeof routes; ...

typescript

Error in custom TypeScript: Incorrect error instance detected within the component

I encountered a unique issue with my custom Error export class CustomError extends Error{ constructor(message: string) { super(message); Object.setPrototypeOf(this, CustomError.prototype); this.name = "CustomError"; } Furthermore ...

reactjstypescripterror-handlingnext.js

Improving type checking by extracting constant string values from a union type

I am exploring different types of employees: interface Employee { employeeType: string } interface Manager extends Employee { employeeType: 'MANAGER' // .. etc } interface Developer extends Employee { employeeType: 'DEVELOPER&apos ...

typescripttypechecking

Break down the provided Array type into distinct new types

If we have a specific type defined as: type Tuple = [name: string, age: number, address: string]; and we are interested in creating a new type without the first element, like this: type NewTuple = [age: number, address: string]; Is there a way to achieve ...

typescript

The system attempted to sign in a user quietly, but unfortunately, no user is currently logged in, resulting in the error code AADSTS500

Attempting to integrate a sample Angular application with Azure Active Directory, I utilized: The MSAL library of Microsoft. A 30-day trial for my Azure portal subscription. Here are the steps I followed: Step-1 Registered the application in my trial A ...

angularazureazure-active-directory

Place the Div in a consistent position on images of varying widths

I have a dilemma with my class that is supposed to display images. The issue arises when I try to place a div within an image inside this class. Everything works smoothly when the image takes up the entire width of the class, but as soon as the image widt ...

htmlcssangulartypescript

What implications does dependency injection have for performance in Angular?

Our Angular 2/4 application is quite extensive, utilizing reactive forms with a multitude of form controls. I'm wondering about the impact of injecting a ChangeDetectorRef instance into approximately 200 form control components. Will there be a notic ...

angulardependency-injectionangular2-changedetection

Having trouble retrieving files from an Angular2 service

I am facing an issue in creating an Angular2 service for downloading files from the server. I have a table where each record represents a single file. When clicking on a specific record, the download method is called: download(r: FileObject) { this.re ...

angularblobangular2-services

How to update an Array<Object> State in ReactJS without causing mutation

In my program, I store an array of objects containing meta information. This is the format for each object. this.state.slotData [{ availability: boolean, id: number, car: { RegistrationNumber : string, ...

javascriptreactjstypescriptimmutability

What is the best way to extract information from a button and populate a form in AngularCLI?

I am currently attempting to enhance my Angular App by using a button to transfer information to a form upon clicking, rather than the traditional radio buttons or select dropdowns. My objective is to incorporate HTML content into the button (such as Mat-I ...

angulartypescriptformsangular-material

Create a class with additional attributes to support different types of options

I define a set of options represented by strings: export type Category = 'people' | 'projects' | 'topics' | 'tools' An index is declared as follows: interface Entry { ... } type IPostEntryIndex = { [name in Cate ...

typescript