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

Can functions be used as keys in a collection in JavaScript's map?

Is it possible to center-align the text in a Material-ui TextField and enforce a minimum numerical value at the same time?

Unable to load the .js file within the Angular module

Angular's Motion Module

A function that retrieves the empty values from an array and returns undefined if there

What is the best way to extract the variable inside a script tag as a JSON value?

Saving asp.net strings in different formats to datetime fields in a database

The values in my JavaScript don't correspond to the values in my CSS

Show basic HTML elements on a single page of an Angular Material web application

Show or hide the right element when clicked using ng-show in AngularJS

The Cross-Origin Resource Sharing request using the PUT method has been denied due to restrictions set by the

Facing an issue with the ng2-carousel component where the left and right arrow icons are

What is the correct method for adjusting the height properties of an element?

Getting the ID of a select input option in Vue.js using FormulateInput

What causes a slow disappearance of both the form element and its child elements when the visibility attribute is set to hidden on the

Show Firebase data on Angular 6 mat-card in a randomized sequence when the page loads or refreshes

What steps should be taken to incorporate a user input space similar to the one found in the Wordpress new post section

The output from the Compute function is not showing up in the TextBox as expected

What is the best way to include additional columns in a multiselect dropdown using jQuery select2?

Exploring the impact of JavaScript tags on website performance in accordance with W3