Disabling the functionality of the buttons for adding, editing, and deleting

In my Angular asp.net core web api project, I am looking to implement dynamic buttons. Specifically, when the status of a product is "Z", I need to disable the add, edit, and delete functionality.

I have a method that works for this scenario, but I am unsure of how to apply it in a different case. Here is an example of the method in action:

Component.service.ts

    getDisabledAddEditDel(model:Component,mode: string)
{
    if(model && mode != 'View' && mode !='Add' && model.StatusOfProduct === 'Z')
    {
        return false;
    }
    return true;
}

In the above case, the StatusOfProduct is available in the model Component. However, in the second case, the StatusOfProduct is not present in the model. How can I access the StatusOfProduct from the Component in another service or model without directly adding it to the second model?

Thank you.

Answer №1

To disable a button based on certain conditions, you have a couple of options. One way is to directly add the condition in the HTML using the [disabled] directive. Setting it to true will disable the button when the condition is met.

 <button [disabled]="model && mode != 'View' && mode != 'Add' 
                && model.StatusOfProduct === 'Z'" (click)="add()">ADD</button>

Alternatively, you can achieve the same result by calling a function.

 <button [disabled]="getDisabledAddEditDel(model, mode)"
                (click)="add()">ADD</button>

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

Top picks for ReactJS Typescript accounts

As a novice programmer, I am working on learning ReactJS/NodeJS/Typescript through project-based practice. Currently, I am developing a social media platform and have encountered an issue. I want to display different random users from my MySQL database in ...

Type of result from a function that returns a linked promise

In my class, I have a method that returns a chained promise. The first promise's type is angular.IPromise<Foo>, and the second promise resolves with type angular.IPromise<Bar>. I am perplexed as to why the return type of doSomething is an ...

Arranging mat-checkboxes in a vertical stack inside a mat-grid-tile component of a mat-grid-list

I'm looking to create a grid list with 2 columns, each containing 2 checkboxes stacked vertically. While I found this helpful question, it still involves a lot of nested divs. Is there a cleaner way to achieve this layout? Here's how I currentl ...

Tips for defining a function across a Angular project

I have the following configuration set up in an Angular5 project using Angular-cli 1.5 within typings.d.ts declare interface String { toSentenceCase(): string; } declare function _debug(o, message?, type?): void; inside app/core/common.ts String.pro ...

How to Trigger a Javascript Function from an OnItemClick Event in ASP.NET ListView

In order to achieve the functionality of refreshing ListView No.2 without refreshing the entire page when a user clicks on an item in ListView No.1, I am attempting to use JavaScript. Here is what I have tried so far: ListView No.1: <asp:ListView ID=" ...

Seeking guidance on transforming a thunk-based create store into a promise-based one. Any suggestions?

I am currently transitioning my app from loading data from local storage to using Firebase. Firebase always returns a promise, so I need to adapt my existing store to work with the new Firebase data. Here is the original code snippet: export const loadSta ...

Having difficulty in dynamically loading an image from an API's URL in Angular

In the title, I mentioned that I am utilizing a free API to display cryptocurrency news for my practice project. Everything seems to be working fine except for displaying the images in card view. I will share my code here, so if you have any suggestions on ...

Can you explain the significance of the ellipsis in @NGRX for Angular?

Can you explain the significance of these three dots and why they are necessary? export function leadReducer(state: Lead[]= [], action: Action { switch(action.type){ case ADD_LEAD: return [...state, action.payload]; case R ...

Does the latest stable version of Angular2 come with a named-routerOutlet feature?

<router-outlet name="another_name"></router-outlet> & the routes are defined as {path: '', component: AnotherComponent} TS is not able to identify this. 'name' is not a valid route parameter Any suggestions on how to ...

Can content projection be utilized from a child component in Angular?

Keep in mind, this example could be achieved without using content projection. I am just showing a simplified version here. Imagine having a component that displays lists of names in two separate elements: import { Component } from '@angular/core&ap ...

The issue of Angular component not refreshing after subscribing to data

Exploring the Angular Component userService import { Component, OnInit, Input } from '@angular/core'; import { ProductItem } from 'src/app/service/product.service'; import { UserService } from 'src/app/service/user.service'; ...

The parameter "disabled=false" is not functioning properly in TypeScript 2.1

Struggling to deactivate a field by accessing the element ID in TypeScript 2.1. Came across this syntax for TypeScript 1.5, but unfortunately, it doesn't seem to work in 2.1. Any assistance would be greatly appreciated. ( document.getElementById(&apo ...

Experience Next.js 13 with Chakra UI where you can enjoy Dark Mode without the annoying White Screen Flash or FOUC (flash of unstyled content)

Upon refreshing the page in my Next.js 13 /app folder application using Chakra UI, I notice a few things: A momentary white flash appears before switching to the dark theme. The internationalization and font settings momentarily revert to default before l ...

I am looking to include both a space and a comma in the State dropdown value in an Angular application

I am facing an issue with my dropdown in Angular 9. When the State is more than one, it displays without any space between them. I want it to show like: Licensed State:ARCA I need like: AR, CA This is the code I have so far: <ng-c ...

What is the best approach to incorporate a stopwatch?

I'm exploring ways to track the time it takes for a user to click a button. While I have a working solution, I'm curious if there's a more efficient method available. Below is my current implementation: export class MainComponent implements ...

What is the maximum number of files that FileUploader can accept when multi-select is enabled?

I encountered the following issue: A first chance exception of type 'System.Web.HttpException' occurred in System.Web.dll Additional information: Maximum request length exceeded. while attempting to upload 250 JPEG files, each around 98 KB in ...

Tips on skipping the need to repeatedly use `@ApiProperty()` for every dto in NestJs-swagger

I'm currently exploring ways to streamline the process of specifying @ApiProperty() for each DTO. I've heard about a method involving the creation of a nest-cli.json file, where if you define Promise<DTO> in your controller within nest-swa ...

Determine whether an array is void, then proceed to deactivate a button

I am attempting to prevent a button from being clickable if an array is empty, but I am encountering difficulties. <button [disabled]="(users.length ==0 )?true:false">Send mass emails</button> Within the TypeScript file: users: UsersModel[]; ...

What causes TypeScript to generate an error when using two array of object types, but not when using the shape of both?

There are two basic types of data available: type DataA = { percent: string; exchange: string; }; type DataB = { price: number; exchange: string; }; I'm puzzled as to why TypeScript gives errors when I try to use both types together: const ...

Limit function parameter types to object keys

Is it possible to constrain my function parameter to match the keys of an object? I want to achieve something similar to this: export const details = { x: { INFO_x: 'xxx' }, y: { I ...