How can I prevent buttons from being created using ngFor in Angular?

Question

How can I prevent buttons from being created using ngFor in Angular?

I need help with creating an HTML table that includes a cell with a button and a dropdown generated using ngFor. How can I disable the buttons (generated via ngFor) if no value is selected from the dropdown? Here's what I have tried so far:

In my AppComponent, I have the following:

ts

customers: Array<Object> = [];
level: string;

changedvalue(event: Event) {
   const value = (<HTMLSelectElement>event.target).value;
   this.level = value;
  }

html

<tbody>
<tr *ngFor="let customer of customers">
     <td> {{ customer.uid }} </td>

     <td> {{ customer.name }} </td>

     <td> {{ customer.level }}</td>

     <td>
     <select (change)="changedvalue($event)" class="form-control" name="level">
        <option  hidden selected> -- select an option -- </option>
        <option>Level 1</option>
        <option>Level 2</option>
     </select>
     </td>

    <td><button [disabled]=!level >Send</button></td>

</tr>
</tbody>

The issue with this code is that it enables all the buttons if any dropdown has a selected value. What I want is to only enable the button in front of each individual dropdown. How can I connect each button to its respective dropdown created using ngFor?

javascript angular typescript

Answer 1

Answer №1

It is important to store a value within the customer so that each iteration will have its own level variable. Additionally, I have updated the method name to adhere to coding conventions.

<tbody>
    <tr *ngFor="let customer of customers">
         <td> {{ customer.uid }} </td>

         <td> {{ customer.name }} </td>

         <td> {{ customer.level }}</td>

         <td>
         <select (change)="onLevelChange($event, customer)" class="form-control" name="level">
            <option  hidden selected> -- select an option -- </option>
            <option>Level 1</option>
            <option>Level 2</option>
         </select>
         </td>

        <td><button [disabled]=!customer.level >Send</button></td>

    </tr>
</tbody>

customers: Array<Object> = [];

onLevelChange(event: Event, customer) {
   const value = (<HTMLSelectElement>event.target).value;
   customer.level = value;
   // if compiler complains as "there is no level property of customer"
   // you can do following
   // customer['level'] = value;
}

Answer 2

It is important to store a value within the customer so that each iteration will have its own level variable. Additionally, I have updated the method name to adhere to coding conventions.

<tbody>
    <tr *ngFor="let customer of customers">
         <td> {{ customer.uid }} </td>

         <td> {{ customer.name }} </td>

         <td> {{ customer.level }}</td>

         <td>
         <select (change)="onLevelChange($event, customer)" class="form-control" name="level">
            <option  hidden selected> -- select an option -- </option>
            <option>Level 1</option>
            <option>Level 2</option>
         </select>
         </td>

        <td><button [disabled]=!customer.level >Send</button></td>

    </tr>
</tbody>

customers: Array<Object> = [];

onLevelChange(event: Event, customer) {
   const value = (<HTMLSelectElement>event.target).value;
   customer.level = value;
   // if compiler complains as "there is no level property of customer"
   // you can do following
   // customer['level'] = value;
}

Answer 3

Answer №2

Here's a suggested approach:

Manually add a level to your customer model and follow these steps:

<tbody>
<tr *ngFor="let customer of customers">
     <td> {{ customer.uid }} </td>

     <td> {{ customer.name }} </td>

     <td> {{ customer.level }}</td>

     <td>
     <select (change)="customer.level = !customer.level" class="form-control" name="level">
        <option  hidden selected> -- select an option -- </option>
        <option>Level 1</option>
        <option>Level 2</option>
     </select>
     </td>

    <td><button [disabled]=!customer.level >Send</button></td>

</tr>
</tbody>

Answer 4

Here's a suggested approach:

Manually add a level to your customer model and follow these steps:

<tbody>
<tr *ngFor="let customer of customers">
     <td> {{ customer.uid }} </td>

     <td> {{ customer.name }} </td>

     <td> {{ customer.level }}</td>

     <td>
     <select (change)="customer.level = !customer.level" class="form-control" name="level">
        <option  hidden selected> -- select an option -- </option>
        <option>Level 1</option>
        <option>Level 2</option>
     </select>
     </td>

    <td><button [disabled]=!customer.level >Send</button></td>

</tr>
</tbody>

Answer 5

Answer №3

If you want to customize your customers object, you can add a custom property to it.

To see this concept in action, check out the live example on StackBlitz: https://stackblitz.com/edit/angular-2m8ns7?file=src%2Fapp%2Fapp.component.ts

Here is an example code snippet demonstrating how to toggle a status for each customer:

<div *ngFor="let c of customers; let i = index">
  <span>{{c.name}} {{c.surname}} | Is Enabled? : {{c.isEnabled}}</span> 
  <button (click)="toggleMe(i)">Toggle Status</button>
</div>

Included below is the TypeScript code implementing this functionality:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public customers : any[] = [];

  constructor(){
     this.customers = [
    {
      name: "Jhon",
      surname: "Cena",
      isEnabled: false
    },

    {
      name: "Mike",
      surname: "Mya",
      isEnabled: false
    },

    {
      name: "Sandy",
      surname: "Rivers",
      isEnabled: false
    }
  ];
  }

  toggleMe(i){
    this.customers[i].isEnabled = !this.customers[i].isEnabled;
  }
}

Answer 6

If you want to customize your customers object, you can add a custom property to it.

To see this concept in action, check out the live example on StackBlitz: https://stackblitz.com/edit/angular-2m8ns7?file=src%2Fapp%2Fapp.component.ts

Here is an example code snippet demonstrating how to toggle a status for each customer:

<div *ngFor="let c of customers; let i = index">
  <span>{{c.name}} {{c.surname}} | Is Enabled? : {{c.isEnabled}}</span> 
  <button (click)="toggleMe(i)">Toggle Status</button>
</div>

Included below is the TypeScript code implementing this functionality:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public customers : any[] = [];

  constructor(){
     this.customers = [
    {
      name: "Jhon",
      surname: "Cena",
      isEnabled: false
    },

    {
      name: "Mike",
      surname: "Mya",
      isEnabled: false
    },

    {
      name: "Sandy",
      surname: "Rivers",
      isEnabled: false
    }
  ];
  }

  toggleMe(i){
    this.customers[i].isEnabled = !this.customers[i].isEnabled;
  }
}

How can I prevent buttons from being created using ngFor in Angular?

Answer №1

Answer №2

Answer №3

Similar questions

Disabling iframe javascript timers when iframe is no longer in the user's view

From HTML to Python to Serial with WebIOPi

Is there a way for me to show "No data" when the json response in vue js is empty?

Material UI TreeView: Organize and present node data with multiple columns in a tree structure

What could be causing JSON.parse to encounter errors when parsing a string array?

What are the steps to integrate material-ui with styled-components effectively?

Conceal a division on a webpage according to the URL of the specific

What is the best way to switch from http to https in a React application?

How to store an imported JSON file in a variable using TypeScript

Having trouble grasping the error message "Uncaught Typerror Cannot Read Property of 0 Undefinded"?

Incorporate keyboard input functionality into an object wrapper

Dropdown with no selected option

Is there a way to display the JavaScript widget exclusively on the homepage or main page

Leveraging the power of React's callback ref in conjunction with a

Refresh the screen after 10 seconds

Tap and hold with Zepto

Encountered an issue in React Native/Typescript where the module 'react-native' does not export the member 'Pressable'.ts(2305)

Is it possible to utilize Vue.js' v-if directive to validate if a certain value is present within an array

Error: Variable 'err' is undefined in Node.js

Using Material UI Slider along with Typescript for handling onChange event with either a single number or an