Guide to Generating Toggle Buttons with For Loops in Angular 4/6

In my latest project, I have successfully implemented a demo with three buttons dynamically generated using a for loop on the backend response.

Each button is clickable and toggles between active and inactive states upon click. However, I am seeking advice on how to modify the logic so that only one button can be active at a time (similar to a toggle button, but without the actual toggle functionality).

The goal is for selecting one button to automatically deactivate the other two. If you have any insights or suggestions, please refer to the code in the following demo:

View updated code and current working logic

angulartypescriptbutton

Answer №1

After some revisions, I've updated the code to appear as follows:

  modifyMethod(data) {
    this.buttonsList.forEach(item => {
       item['active'] = (item.number === data.number);
    });
  }

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

hiding html elements by using the display property set to none instead of physically removing

I am currently utilizing an if-else statement to display different HTML structures. As a result, the entire HTML is being rendered twice. Is there a way we can utilize 'display: none' instead? I attempted to use it in th ...

javascriptjqueryhtmlcsstypescript

The JQuery signature does not include the necessary string context

We are in the process of transitioning legacy JavaScript code to TypeScript. In our current codebase, we have jQuery selectors that utilize a string as a context: $("example", "someId"). However, when converting this to TypeScript, the definition file JQu ...

jquerytypescript

Turning an array of strings into a multidimensional array

I have a JavaScript string array that I need to convert into a multidimensional array: const names = [ "local://john/doe/blog", "local://jane/smith/portfolio", "as://alexander/wong/resume" ]; The desired output sh ...

javascripttypescriptmultidimensional-array

The service.subscribe function in Angular's Component Constructor is not functioning properly after the update

There are two components in my project, a parent and child component, and I am using a shared service to transfer data between them. The structure of the Service Class is as follows: export class AddItemDataTransferService { // Observable string sourc ...

angularangular-componentsangular5

Chess.js TypeScript declaration file for easy implementation

Currently, I am delving into learning typescript and have taken up the challenge of crafting a declaration file for the chess.js library. However, it seems that I am struggling to grasp the concept of creating one. Whenever I attempt to import the library ...

javascriptangulartypescriptnpmtypescript-typings

What is the TypeScript's alternative to ReasonML's option type?

When using ReasonML, the option type is a variant that can be either Some('a) or None. If I were to represent the same concept in TypeScript, how would I go about it? ...

typescriptreasonrescript

Why does NgWebDriver only work after the page is reloaded?

Currently, in my testing setup for an Angular app, I am utilizing selenium and NgWebDriver. However, I have noticed that when I use ngWebDriver, the testing process takes a significantly longer time. Strangely, when I manually refresh the page, all the t ...

javaangularselenium

The data attribute in Cypress does not appear in the Angular Document Object Model

I've been attempting to integrate Cypress into my Angular project using data-cy attributes, but the behavior is quite inconsistent. Some areas display the attribute in the DOM, while others do not. For instance, in the following example, the data-cy ...

angularangular-materialcypresscustom-data-attribute

Emails are failing to send through NodeMailer, specifically on the production server

When creating a SMTPtransporter to send emails, I encountered an issue when deploying the code on a server. The code works perfectly fine on my computer with Yarn version '1.22.17'. import * as nodemailer from 'nodemailer'; import * as ...

javascriptnode.jstypescriptnodemailer

Divide Angular ngFor into separate divs

Here is an example of my current array: [a, b, c, d, e, f, g, h, i] I am aiming to iterate through it using ngFor and split it into groups of 3 elements. The desired output should look like this: <div class="wrapper"> <div class="main"> ...

javascriptangular

Is it possible to modify the stroke color of the progress circle in ng-zorro?

I am working on an Angular project where I aim to create a dashboard displaying various progress circles. Depending on the progress, I need to change the color of the line. Current appearance: https://i.sstatic.net/hR2zZ.png Desired appearance: https://i. ...

javascriptangularangular7ng-zorro-antd

What are some effective strategies for utilizing observables for handling http requests in an Angular application?

In my Angular application, I am retrieving data from APIs. Initially, my code in detail.component.ts looked like this: //code getData() { this.http.get(url1).subscribe(data1 => { /* code: apply certain filter to get a filtered array out */ t ...

angulartypescriptrxjs-observables

How Vue3 enables components to share props

Having recently made the switch from Vue2 to Vue3, I find myself a bit perplexed about the best approach for sharing props among multiple components. My goal is to create input components that can share common props such as "type", "name", and so on. Previ ...

typescriptvue.jsvue-composition-apivue-propsvue-options-api

Learn how to utilize interpolation within an *ngIf statement in Angular 2 in order to access local template

Consider the following scenario; <div *ngFor="item of items; let i = index;"> <div *ngIf="variable{{i}}">show if variable{{i}} is true</div> </div> Suppose I have variables named "variable0", "variable1",... Is there a way to ac ...

javascripthtmlangular

Ways to delete an element from an array in MongoDB

I am a beginner in the MEAN stack development. I am currently working on implementing this and this. I have been using the $pull method, but it seems that it is not working for me. I suspect that the issue might be due to the differences in my MongoDB stru ...

javascriptnode.jsmongodbtypescriptmongoose

Hierarchy-based state forwarding within React components

As I embark on the journey of learning Typescript+React in a professional environment, transitioning from working with technologies like CoffeeScript, Backbone, and Marionettejs, a question arises regarding the best approach to managing hierarchical views ...

javascriptreactjsuser-interfacetypescriptfrontend

Having some trouble while attempting to set up the next-auth@beta package due to an error

Currently encountering the following error message: code EUNSUPPORTEDPROTOCOL Unsupported URL Type "workspace:": workspace:* I have made sure to update my node to the most recent recommended version. In a previous project, I successfully instal ...

reactjsnode.jstypescriptnext.jsnext-auth

The matInput value remains stagnant and fails to update

I am encountering an issue with a form Input field for username and password. Here is the code snippet: <mat-form-field class="mdb-form-field-modal form-adjustments"> <input (keydown)="emailBtnFocus($event)" tabindex="0" matInput placeholder ...

angularangular-materialangular7angular-forms

Listening for a long press in Angular 2: A step-by-step guide

Check out this link for an AngularJS example. Curious how this functionality translates to Angular 2? ...

angulartypescript

Selecting the checkbox to populate the input field

In my application, there is an input field that can be filled either by searching for an item or by clicking on a checkbox. When the user clicks on the checkbox, the input should be automatically filled with the default value valueText. How can I detect ...

angulartypescript