Creating Angular components in *ngFor loop

I have set up multiple radio button groups by dynamically populating options using ngFor within a ngFor loop.

categories:string[] = [category_1, ..., category_n];
options:string[] = [option_1, ..., option_n];

<fluent-radio-group
    *ngFor='let categroy from categories'
    (change)='some_function()'>
    <fluent-radio
        *nfFor='let option from options'
        value=value>
            value
    </fluent-radio>
</fluent-radio-group>

Now, I am looking for a way to access the selected values of each category in the 'some_function()'. How can I identify and retrieve these values?

I have attempted utilizing an Input variable through ElementRef. While it works, this method becomes cumbersome with numerous categories.

Answer №1

<fluent-radio-group *ngFor="let category of categories">
<fluent-radio *ngFor="let option of options" (click)="some_function(option)" value="value">{{ option }}</fluent-radio></fluent-radio-group>

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

The configuration file tsconfig.json did not contain any input

After downloading angular2-highcharts through npm for my application, I encountered an error in the tsconfig.json file of the package while using Visual Studio Code: file: 'file:///c%3A/pdws-view-v2/node_modules/angular2-highcharts/tsconfig.json&apos ...

Issue with displaying MP4 movies in Angular

I'm trying to display an mp4 video in Angular 9: <video controls (click)="toggleVideo()" preload="none" *ngIf="post.moviePath != null" #videoPlayer> <source [src]="getMovieSanitazePath(post.moviePath ...

Enhance the functionality of Immutable.js field by integrating a custom interface in Typescript

Imagine a scenario where the property name is field, essentially an immutable object. This means that methods like field.get('') and other immutable operations are available for use. Nevertheless, I have my own interface for this field which may ...

Waiting patiently for the arrival of information, the dynamic duo of Angular and Firebase stand poised and

Here is the given code snippet: signIn(email, password) { let result = true; firebase.auth().signInWithEmailAndPassword(email, password).catch(error => result = false); waits(100); return result; } I have a ...

Can someone provide guidance on integrating UI components with Angular 8?

I have developed my own custom component called app-button.ts. This component is responsible for checking the current user's roles and rendering the button only if it matches the defined roles. The ButtonType property is used to specify the style of ...

The 'any' type is not compatible with constructor functions

I am currently working on implementing a class decorator in Typescript. I have a function that accepts a class as an argument. const createDecorator = function () { return function (inputClass: any) { return class NewExtendedClass extends inputClass ...

Developing dynamic-sized tuples in TypeScript

Recently, I was attempting to develop a zipper for arrays. For instance, if the user inputs 3 arrays with sizes of 3, 5, and 12, the output array of tuples would be the size of the largest array. The output consists of tuples containing elements at a speci ...

Utilize [markdown links](https://www.markdownguide.org/basic-syntax/#

I have a lengthy text saved in a string and I am looking to swap out certain words in the text with a highlighted version or a markdown link that directs to a glossary page explaining those specific words. The words needing replacement are contained within ...

AngularJS - Utilizing Nested ng-repeats

I'm attempting to iterate through a given JSONObject that contains JSONArray and display it in an HTML format. Here's a sample of what I have: jsonData: { "category1": [ { "name": "Some title", "desc": "And i ...

Retrieving ng-pattern as a variable from a service

Hey there! I'm currently working on an application that requires extensive form validation across multiple pages. To streamline this process, I am attempting to extract validation patterns from a service used among the controllers. However, I've ...

Troubleshooting Jasmine Unit Testing issues with the ng-select library

Recently, I integrated the ng-select component from Github into my Angular application without encountering any console errors during runtime. It functions as expected; however, issues arise when running unit tests with Jasmine. To incorporate NgSelectMod ...

Issues with Angular 5 and Firebase integration

After updating my computer to High Sierra with a clean install, reinstalling the angular-cli, and cloning one of my previous projects that uses Firebase and angularfirebase2, I encountered an issue where any operation to get data from Firebase is not worki ...

The generics in TypeScript for Parameters<URLS[T]> and the corresponding URLS[T] are not compatible

In the code below, I am encountering a type error: const urls = { inviteNewUser: ({teamId, intent = 'invite'}: {teamId: string; intent?: Intent}) => `/magic-link?intent=${intent}&teamId=${teamId}`, resetPassword: ({intent = 'r ...

Tips on how to connect the scope from a controller to a custom directive in Angular

Currently, I am delving into the world of Angular and finding myself immersed in directive lessons. However, as I engage in some practice exercises, I have encountered a stumbling block. Specifically, I have developed a custom directive with the intention ...

Encountering an error message stating "Cannot access 'color' property of undefined" while setting up HighCharts in my xx.ts file

I am new to incorporating highcharts into my project and struggling with it. Despite following documentation and trying various methods, I have not been able to make it work as intended. My multi-series high charts were functioning properly until I decide ...

"An error has occurred stating that the header is not defined in

It is a coding issue related to payment methods. The headers type is undefined in this scenario, and as a newcomer to typescript, pinpointing the exact error has been challenging. An error message is indicating an issue with the headers in the if conditio ...

Creating an Increment and Decrement Button for Products in Angular and Ionic 3

I have gone through various tutorials, but there is still some confusion. I am attempting to create an increment and decrement button, but so far I have not been successful. Within an ion-list, I have multiple h3 elements. Here is a snippet of my view: ...

Is there a way to enable code completion for Firebase on VS Code?

After successfully setting up Typescript for code completion following the guidelines provided in this resource, I now want to enable code completion for Firebase in VS Code. However, I am unsure of the steps to achieve this. How can I activate code compl ...

Adjust the button sizes in Ngprime

I am trying to customize my primeng buttons because they appear too large for my project. I found in the documentation that I can make them smaller by using: <p-button label="Small" icon="pi pi-check" styleClass="p-button-sm&quo ...

Angular triggers a reload of iframe content whenever there is a manipulation of the DOM

One of the challenges I'm facing is with dynamically loading an iframe when a specific condition is met. <div *ngIf="iframeData"> <iframe [src]="sanitizer.bypassSecurityTrustResourceUrl(iframeData.iFrameUrl)" name="paymetricIFr ...