Guide on deactivating the div in angular using ngClass based on a boolean value

displayData = [
  {
    status: 'CLOSED', ack: false
  },
  {
    status: 'ESCALATED', ack: false
  },
  {
    status: 'ACK', ack: false
  },
  {
    status: 'ACK', ack: true
  },
  {
    status: 'NEW', ack: true
  }
]

In this scenario, the goal is to only disable the div if the status is 'NEW' and the acknowledgment is 'true'. For all other combinations of status and acknowledgment, the div should remain enabled.

<div class="action-default"
[ngClass] = "!['CLOSED', 'ESCALATED', 'ACK', 'NEW'].includes(dataDisplayed?.status) ? '' : 'disabled'" >
  <i nz - icon nzType = "close-circle" nzTheme = "outline" > </i>
Cancel
  < /div>
javascriptangulartypescript

Answer №1

The list of items displayed is structured as an array comprising objects. Consequently, attempting to access the 'status' property directly via 'dataDisplayed?.status' will not work as intended. It is essential to retrieve each object individually before accessing its properties.

Based on your explanation, it appears that you should be checking both 'status' and 'ask', yet currently, you are only verifying 'status'.

Your code implementation should resemble the following:

<div 
  class="action-default"
  *ngFor="let data of dataDisplayed"
  [ngClass]="((['CLOSED', 'ESCALATED', 'ACK'].includes(data.status) && data.ack) || (data.status === 'NEW' && !data.ack)) ? 'disabled' : ''">
  <i nz-icon nzType="close-circle" nzTheme="outline"></i>
  Cancel
</div>

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

Exploring the power of React's useState and useEffect hooks with JSON data

Just starting out with React. The task I'm tackling involves fetching data from an API (provided in JSON format) and updating the setNavItems with the retrieved JSON response. However, when attempting to iterate over the results using navItems.map, n ...

javascriptreactjsuse-state

Exploring the loading of stateful data in ReactJS and implementing optimizations

Exploring the world of ReactJS in conjunction with Django Rest Framework (DRF) def MyModel(model): ... status = ChoiceField(['new', 'in progress', 'completed'...]) In my application, I have dedicated sections for eac ...

javascriptpythondjangoreactjsdjango-rest-framework

How come the information isn't being transferred between components?

Is my method correct if I want to pass the this.prompt() function from TitleBar to Portfolio? This is what my index.html file looks like: var TitleBar = React.createClass({ render: function() { return( <div className="jumbotron"> ...

javascripthtmlcssreactjs

The Bootstrap modal simply fades away without ever making an appearance

My bootstrap modal is not displaying on desktop, only showing a faded screen. It works fine on mobile and tablet devices. Any ideas why this might be happening? Here is the code: <button type="button" class="btn btn-primary" data-to ...

javascripthtmljquerycsstwitter-bootstrap

Obtaining a value from an array using Google App Script

Having some difficulties with the code snippet provided here. It might be a basic question, but I'm unable to figure out what's going wrong. The issue is that I'm trying to perform calculations on individual values in an array generated fro ...

javascriptarraysgoogle-apps-script

Updating a particular element within nested arrays: best practices

I have developed a data table containing student records using material UI. Each row represents a different student array with a fee verification button. My goal is to change the fee status when the button is clicked for a specific student, but currently t ...

javascriptarraysreactjs

The integration between React hook form and reactstrap input components is not functioning properly

Having an issue with react-hook-form and reactstrap. The component List.jsx is causing trouble: import { useContext, useEffect } from "react"; import { ListContext, ADD_LIST } from '../providers/ShoppingListProvider'; import { Link } from "react- ...

javascripthtmlreactjsreact-hook-formreactstrap

Implementing Checkbox Functionality within a Dropdown Menu using AngularJS or JavaScript

I am interested in finding a multi-select checkbox solution similar to the one demonstrated here: Instead of using jQuery, I would prefer options in AngularJS or pure JavaScript. Does such a solution already exist in these frameworks, or is there guidance ...

javascripthtmlangularjscheckboxcheckboxlist

Is there a way to customize the progress bar percentage in Ant design?

I am currently utilizing React JS and importing the Ant Design progress component (refer to https://ant.design/components/progress/). However, I am facing difficulties in dynamically editing the percentage of the progress bar using JavaScript after it has ...

javascriptreactjsprogress-barant-design-pro

Typescript patterns for creating a modular library design

Transitioning a JavaScript project to TypeScript has been challenging for me, especially when it comes to establishing a solid design pattern for the library's modularity. Main Concept The core functionality of my library is minimal. For instance, i ...

typescriptdesign-patterns

When attempting to dispatch an action with switchMap, it fails, while map successfully triggers the

I recently started utilizing ngrx and ngrx/effects. In the code snippet below, I encountered an issue where using switchMap with concatLatestFrom and dispatching an action fails, while using map seems to work perfectly fine. Any idea why? When trying to ...

angularrxjsngrxngrx-storengrx-effects

Is there a method to prevent the repetition of this loop?

I have a question regarding my React app development. I am currently using useEffect to loop through six items every time, even when only one item has changed. How can I optimize this so that only the variable that was changed in the reducer function is ...

javascriptreactjs

What are the security risks of evaluating user-supplied strings in web browser storage?

I'm in the final stages of developing a script that creates an API for performing storage operations across various web browser storage technologies. Currently, I am focusing on adding conditional retrieval and removal functionalities. These features ...

javascripthtmlsecurityweb-sqlindexeddb

Vue (Gridsome) App encountering 'Cannot POST /' error due to Netlify Forms blocking redirect functionality

Currently, I am in the process of developing my personal website using Gridsome. My goal is to incorporate a newsletter signup form through Netlify Forms without redirecting the user upon clicking 'Submit'. To achieve this, I utilize @submit.prev ...

javascriptvue.jsnetlifynetlify-function

Understanding how to retrieve the Request Header value when entering my Angular application

My Angular application needs to be accessed from another external or internal application. The request sent from this application includes specific information in the Request Header that I need to identify where it is coming from. However, I am strugglin ...

angularhttp-headers

Can someone please provide guidance on how I can access the current view of a Kendo Scheduler when switching between views, such as day view or week

<kendo-scheduler [kendoSchedulerBinding]="events" [selectedDate]="selectedDate" [group]="group" [resources]="resources" style="height: 600px;" [workDayStart]="workDayStart" [workDayEnd] ...

angulartypescriptkendo-ui-angular2kendo-scheduler

The Node.js azure-storage TableService does not offer any functionalities or operations

Having trouble connecting to my Azure storage account due to issues with the azure-storage module. Specifically, after creating a TableService object, I am only able to access the filter method on it. When attempting to use methods like queryTables and cre ...

javascriptnode.jsazureazure-storage

Tips for boosting the tabindex in a React search result list with ul-li elements

Implementing search results using ul li: <ul className="search-result"> <li tabindex="1">title here...</li> <li tabindex="2">title here...</li> <li tabindex="3">title here... ...

javascripthtmlcssaccessibility

An example in Typescript for setting an initial/default value for a data type

Can you create a Type with a default value included? For example: type Animal = { kind : "animal" Legs : number, CanFly: boolean } const monkey: Animal = { Legs: 4, CanFly: false}; //In this line, clients must initialize the same value `kin ...

typescript

Display the element when it becomes visible in the user's viewport as they

I've been struggling to implement a feature where an element is shown on scroll when it's in the viewport and hidden when it's not. However, despite my efforts, I haven't been able to get it working properly. Here's what I have so ...

javascriptjqueryhtmlscrollviewport