database of customers
check customer recordscustomer service module
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.
I encountered an issue while trying to load the component located at 'app/shared/lookup/lookup.component.ts' from 'app/associate/abc.component.ts' Folder Structure https://i.stack.imgur.com/sZwvK.jpg Error Message https://i.stack.img ...
Thank you for checking out this question. I have created a login demo using react hooks and TypeScript. I have some concerns: 1. When the login is successful, I use history.push('/home') to navigate to the home page, but the page also renders a N ...
I have a significant project that utilizes Angular's App Shell Model combined with Angular MSAL.js (v2). One issue I am encountering is ensuring that the guard checks are invoked before the app shell is built, rather than just for the projects injecte ...
Can an angular 2 routing configuration include a partial-static parameter? Currently, I am using a classic parameter setup like this: const routes: Routes = [ { path: ':type/fine.html', pathMatch: 'full', redirectTo: &ap ...
I've encountered an issue while trying to develop a directive npm package. Previously, I had successfully created packages for @Component, but this is my first attempt at creating one for @Directive. The problem arises when I run ng serve – the bu ...
I am completely stuck and can't figure out why my code isn't working. Is there anyone who can help me identify the issue? I am attempting to display a "Ticket not found" message when there are no tickets to show. Despite trying to check the leng ...
I have a situation where every time I create an Angular component, an event listener is added. However, upon leaving the page and returning to it, a new event listener is added because the constructor is called again. The problem arises when this event is ...
For some time now, I've been attempting to loop through an array of objects using *ngFor and place two elements inside each row. The goal is to generate a new row after every two components have been added. Here's what I've attempted so far ...
I have a question regarding the implementation of two masks based on the number of digits. While visually they work correctly, when I submit the form, the first mask is always selected. How can I resolve this issue? My solution involves using imask-react ...
I've implemented a post method using Angular's HttpClient. While attempting to subscribe to the response for additional tasks, I encountered the following error: Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{}, ...
How can I determine if an element in an array is empty? Currently, it returns false, but I need to know if the element is blank. The array element may contain spaces. Code let TestNumber= 'DATA- - -' let arrStr =this.TestNumber.split(/[-]/) ...
I need to include this import <link rel="stylesheet" href="./assets/sass/style.scss"> <link rel="stylesheet" href="./assets/sass/plugins.scss"> conditionally in the index.html file of an Angular proj ...
I've been attempting to incorporate a spinner into my application, but unfortunately, the spinner isn't showing up. Despite checking the console and terminal for errors, there doesn't seem to be any indication as to why the spinner is not a ...
Task: Implement code to detect mouse clicks inside or outside a specified component, leading to an error message stating that 'elementref' does not exist within the 'Headercomponent' type. import { OnInit, Input, Output, ElementRef } f ...
While working on my Ionic app, I encountered an issue every time I attempted to use the twilio-chat library in my project through npm install. The error consistently appeared in the .d.ts files. Here is how I imported it in my provider : import { Client ...
Is there a way to locate an object and its parent object within a nested array of unknown size using either lodash or native JavaScript? The structure of the array could resemble something like this: name: 'Submodule122'</p> I have been ...
Upon using the useState and useReducer hooks, I encountered an issue where any code lines following the state update function (setState, dispatch) would be executed in the subsequent re-rendering, with the previous state intact before the update. Essential ...
Why is the subscription object not displaying? Did I make a mistake? this.service.submitGbtForm(formValue) .subscribe((status) => { let a = status; // a = {submitGbtFrom: 'success'} console.log(a, 'SINGLE ...
I have been working on fetching data from an API, storing it in Redux store initially, and then attempting to retrieve it using useSlector to finally save it in local state. Despite getting the data when I console.log it, I am unable to successfully store ...
When the user clicks on the Date column for sorting, it is required to exclude empty rows from the sorting. Empty rows are present due to the application of ngIf on those particular rows. The requirement states that rows with empty column values should eit ...