database of customers
check customer recordscustomer service module
access service details
component for user details display
view user details component 1 view user details component 2
template file for user details component see HTML template
Seeking to compare arrays containing positive and negative words with the customer data stored in the JSON file. The aim is to identify and highlight these specific words according to their nature - green for positive words and red for negative words.
Ignoring the negativity surrounding this question, I'm stepping in to provide a solution.
Check out Demo here
Component
Make sure to convert all words to lowercase in both the goodWords and badWords arrays
obj = {
customer: [
{
threshold: 80,
sentence: 'Agent : Thank you for calling ABC company. My name is Ashley. How may I help you today?'
},
{
threshold: 40,
sentence: 'Customer : I am calling because I recieved a wrong bill. I just paid my phone bill two days ago.'
},
]
};
goodWords = ['thank', 'you', 'help', 'sorry', 'please'];
badWords = ['wrong', 'our', 'last', 'my'];
HTML
<div *ngFor="let item of obj.customer">
<span *ngFor="let word of item.sentence.split(' ')">
<span *ngIf="goodWords && goodWords.indexOf(word.trim().toLowerCase()) > -1; else redWord">
<span style="color: green">{{word}}</span>
</span>
<ng-template #redWord>
<span *ngIf="badWords && badWords.indexOf(word.trim().toLowerCase()) > -1; else other" style="color: red">
{{word}}
</span>
</ng-template>
<ng-template #other>
{{word}}
</ng-template>
</span>
<br><br>
</div>
All the necessary adjustments have been made within the HTML itself. Hopefully, this resolves your concerns.
Currently, I am in the process of designing a set of microservices. The structure I have been following involves each item having its own repository. my-project-logger my-project-numbers-service includes: my-project-logger type definitions + class obje ...
In my component, I have a property called enableButtons which is set to true when I click on an ion-menu label. However, I want this property to revert to false if I click anywhere else. Here's the code I tried: export class ProfilePage implements OnI ...
My goal is to create a function that will return the typeof React Component, requiring it to adhere to a specific props interface. The function should return a type rather than an instance of that type. Consider the following: interface INameProps { ...
I'm currently working on an angular website dedicated to a specific book. One of the features I want to include is the ability for users to select a chapter and view an excerpt from that chapter in HTML format. However, I'm facing a challenge wh ...
I am in the process of developing a customized API, with an endpoint that is specified as shown below: https://i.stack.imgur.com/sZTI8.png To handle the functionality for this endpoint, I have set up a Profiling Controller. Inside my controller directory ...
I am currently developing a component library using react and typescript. I have integrated Vite into my workflow, and every time I build Storybook, the dts plugin is triggered. This has two undesired effects: It generates numerous unnecessary folders an ...
My unit tests are set up using Karma and Mocha. The reason I use Karma is because some of the functionality being tested requires a web browser, even if it's just a fake headless one. However, most of my code can be run in either a browser or Node.js. ...
I have created a new component <ConnectWallet setConnected={(t: boolean) => console.log(t)}> <>test</> </ConnectWallet> The component is initialized as follows import { useState, useEffect } from ' ...
While attempting to run the official sample angular app provided by Microsoft Identity platform (which utilizes the MSAL library for authenticating Azure AD users), an error is encountered. It seems that there may be a challenge in pinpointing the specific ...
Is there a way to make TypeScript imports function properly even if the node_modules directory is not directly in the tree? How can I prevent TypeScript from throwing errors when importing something like rxjs from external/node_modules. For Example: Dir ...
One issue I'm facing is with a fixed-size modal dialog where part of the content gets cut off and becomes inaccessible when the window shrinks to cause an overflow. More specifically, when the window is narrowed horizontally, the left side is cut off ...
A series of interfaces has been defined: export interface FormData<T extends ControlData = any> { [type: string]: T; } export type FormResult<T extends FormData> = { [type in keyof T]: T[type]; }; export interface ControlData<T = any& ...
Managing a project that involves a container holding multiple cards across different pages can be overwhelming. To address this, the screen automatically rotates to the next page after a set time interval or when the user presses the space bar. To enhance ...
In this scenario, what is the purpose of morningharwood-server? Can we find it referenced in the code? ng generate universal morningharwood-server --client-project morningharwood ...
Issue Detected An error occurred with the directive "exportAs" set to "matAutocomplete" ("-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto"> I implemented code referenced from https://material.angular.io/components/autocom ...
I successfully created a replica of YelpCamp using Node and EJS, but now I am attempting to convert it into a Node-React project. Everything was going smoothly until I encountered an issue while trying to list a specific user in the SHOW route. In order to ...
Google's cached pages are only updated once or twice a day, which can result in broken sites on these cached versions. To prevent this issue, it is recommended to remove the contenthash from the middle of the filename for JavaScript files and eliminat ...
I'm in the process of creating unit tests for my Typescript application using the Mocha test framework. Within my web app, I have an internal module (A) that contains a class B. namespace A { export class B { constructor() { } ...
Is there a way to properly render a ListItem component with react-router Link as the root component? Here's the code snippet in question: <ListItem to="/profile" component={Link} > Profile ...
I'm encountering an issue with the TypeScript definition for Cordova. The codrova.d.ts file doesn't allow for any function arguments in the success-callback and error-callback. To better illustrate my problem, here's a small example: Here ...