Ways to extract data from radio buttons using Angular 11

After receiving an API response, the product's variety details are displayed, with each item being assigned a unique identifier. For example, 0 signifies size and 1 represents color. To facilitate selection, radio buttons are provided:

<section class="example-section"  *ngFor="let attr of Attr" >
      
        <mat-radio-button *ngFor="let checkbox of attr.items.split(',')" 
         [name]="attr.attr_slug"  (click)="onClick(checkbox)" [value]="model[attr.attr_slug]" 
          class="example-margin">{{checkbox}}</mat-radio-button>
    
    </section>

The challenge lies in obtaining pairs of selections, such as (s, yellow) or (m, yellow), instead of just individual values. Attempts using a model to store the selections have resulted in only a comma being logged out. How can this be resolved?

angulartypescriptformsdata-bindingngfor

Answer №1

To detect changes, it is necessary to utilize the functionality of the mat-radio-group by implementing the change output event:

<section *ngFor="let attr of Attr" >
  <mat-radio-group [value]="model[attr.attr_slug]"
                   [name]="attr.attr_slug"
                   (change)="onRadioChange()">
    <mat-radio-button *ngFor="let checkbox of attr.items.split(',')" 
                      [value]="checkbox">
      {{checkbox}}
    </mat-radio-button>
  </mat-radio-group>
</section>

@ViewChildren(MatRadioGroup)
radios?: QueryList<MatRadioGroup>;

onRadioChange(): void {
  const value = this.radios?.map((radio) => radio.value).join(','); 
}

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

Develop a React npm package with essential dependencies included

I have been working on developing a UI library using React ts. As part of this project, I integrated an external library called draft-js into the package. However, when I attempt to implement my library in another project, I keep encountering errors. Despi ...

javascriptreactjstypescriptnpmnpm-package

There are no functions or classes returned when using NPM Link with the module

Welcome. Whenever I run npm link ../folder/ToFolder, it works as expected. However, when I attempt to import any function, nothing is returned. A clearer explanation I have tried importing a module that I created from another folder using npm link. When ...

javascriptnode.jstypescriptnpmnpm-link

Obtain information from a CSV document within Highchart Angular

Is there a way to access and retrieve data from a CSV file stored in the assets folder of my local system? The CSV file contains 5 or 6 columns of information. Important: This is an Angular project, therefore jQuery is not available. ...

javascriptangulartypescripthighchartslinechart

How can I limit the keys in a Typescript object to only certain strings?

Is there a way in Typescript to create an object of type Partial with keys that can only be a combination of 'a', 'b', or 'c'? The object should not have all 3 keys, but it must have at least one. Here's what I've at ...

javascriptstringtypescriptobjectkey

Generating a component selector using an @Input parameter

Is it feasible to dynamically create a selector in Angular programmatically? Consider a scenario where there is a parent component named header.component with the following structure; export class ContentHeaderComponent { @Input() iconName: string; } ...

angularangular-componentsangular-template

Why is Firebase Deploy only detecting 1-2 files? It might be due to the default index of Firebase hosting

I'm currently in the process of deploying my Angular App to Firebase Hosting. However, I am encountering an issue where it only displays the default firebase index hosting with no changes. To set up the deployment, I have used firebase init and speci ...

angularfirebasefirebase-hosting

Error 404: Node Module Dependency Not Found - npm Unable to Locate package.json

I recently duplicated the angular module from https://github.com/SebastianM/angular-google-maps into my private github repository, and now I'm attempting to install and utilize the fork. Here are the steps I followed: npm install my-repo\angula ...

angularnpmnpm-install

Why does "excess property checking" seem pleased when I utilize a key from set A or set B, even though "keyof (A|B)" is consistently "never"?

I am diving deeper into Typescript types and encountering some puzzling behavior: interface Person { name: string; } interface Lifespan { birth: number; death?: number; } let k: keyof (Person | Lifespan); //k is never let test1: Person | Life ...

typescript

Step-by-step guide on how to stop CDK Drop depending on a certain condition

I'm trying to figure out how to disable dropping using CDK based on certain conditions. Specifically, I want the drop functionality to be disabled if the list I'm attempting to drop into is empty. I haven't been able to find a solution withi ...

angulartypescriptangular-cdk

Unable to access NgForm.value in ngAfterViewInit phase

In my template driven form, I need to save the initial values of controls. Initially, I thought that using the ngAfterViewInit method would be ideal since it is called after the template is rendered, allowing me to access and store the value of form contro ...

angular

The ASP.NET Core 3.0 Web API method consistently encounters null values

I've encountered an issue with my Angular app where it displays a 500 server error. Here are the methods I'm using: /*Product Service*/ addNewProduct(newProduct: Product): Observable<Product> { console.log(newProduct); return this.http.po ...

angularasp.net-corehttp-post

When conducting tests, TypeScript raises an issue when comparing the values of array elements subsequent to performing a shift()

I am working with an array of strings, which was created by splitting a larger string using the `split` operation. Specifically, I am performing some tests on the first two elements of this array: var tArray = tLongString.split("_") if (tArray[0] == "local ...

arraystypescripttypechecking

The value returned by a mocked Jest function is ignored, while the implemented function is not invoked

Having an issue with mocking the getToken function within my fetchData method in handler.ts while working with ts-jest. I specifically want to mock the response from getToken to avoid making the axios request when testing the fetchData method. However, des ...

javascripttypescriptunit-testingjestjsts-jest

A new feature introduced in TypeScript, expression-level syntax was not present until it was added in JavaScript

Celebrating a Decade of TypeScript remarked that "It’s quite remarkable how the design goals set for TypeScript have stood the test of time." I am particularly intrigued by the goal of "Avoid adding expression-level syntax." One user even brought up thi ...

node.jstypescript

What is the reason behind TypeScript requiring me to initialize a property even though I am retrieving its value from a local reference?

I am just beginning to explore Angular. This is the template for my custom component: <div class="row"> <div class="col-xs-12"> <form action=""> <div class="ro"> <d ...

angulartypescript

Guide on sending information from a parent component to a child component in Angular using an event system

Is it possible to pass data from a parent component to a child component in Angular using a tab group? <mat-tab-group> <mat-tab label="Some text0"> <app-comp></app-comp1> </mat-tab> <mat-tab label="Some ...

angularinputcomponents

The login form is not being recognized by Chrome

I've been working on creating a login form for my website. Oddly enough, when I try to use it on Chrome, it doesn't prompt me to save my password. Yet, it functions properly on other browsers like Edge, Firefox, and Internet Explorer. Here' ...

phphtmlformsgoogle-chromeauthentication

Encountered a problem with regular expressions in Angular 2 - a Module parse error due to an octal literal in strict mode

Greetings, I have encountered an issue with a regular expression in my environment.ts file. export const environment = { passwordPolicy: "^(?!.*(.)\1\1)(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}.*$" }; Unfortunately, whe ...

angulartypescript

Troubleshooting the tabindex issue with buttons in MatMenu in Angular

I am currently using Angular 17 in my project and I am working on adding ADA compliance to it by placing tabindex where needed. However, I am encountering an issue with a button inside a mat menu. The tabindex="0" attribute is not focusing on th ...

angularmaterial-uiangular-material

The unspecified value of a dynamically generated button

Currently, I am working on generating ion cards with a response. Each ion-card contains 3 buttons. I am able to receive the response properly, but I am facing an issue with assigning values to the buttons, or possibly implementing it incorrectly. Here is ...

angularionic2