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

`Upkeeping service variable upon route alteration in Angular 2`

Utilizing a UI service to control the styling of elements on my webpage is essential. The members of this service change with each route, determining how the header and page will look. For example: If the headerStyle member of the service is set to dark ...

Modifying styles/css in Angular2 using JavaScript results in a temporary change in styles before ultimately reverting back to the original styles

Recently, I encountered an issue while trying to change styles for some elements in Angular 2 using JavaScript. Interestingly, when the view is loaded, the height is initially set to maxHeight = 100, but after a few milliseconds, it reverts back to the o ...

Angular not functioning properly with alert windows

Here is a snippet of code where I am attempting to create an alert when a button is clicked: <!DOCTYPE html> <html> <head> <title></title> </head> <body ng-app> <button ng-click="alert('test')"> ...

Is time-based revalidation in NextJS factored into Vercel's build execution time?

Currently overseeing the staging environment of a substantial project comprising over 50 dynamic pages. These pages undergo time-based revalidation every 5 minutes on Vercel's complimentary tier. In addition, I am tasked with importing data for numer ...

Troubleshooting issue: Angular dropdowns not functioning properly with Bootstrap framework

Despite importing Bootstrap 4 and other necessary libraries like jquery and popper into my Angular app using npm, I am facing an issue where the dropdown in the top navigation bar does not work. I am hesitant to bring in additional Angular Bootstrap librar ...

Angular: Utilizing Parameters in HTTP GET Requests

I've recently started using Angular. Currently, I'm working on sending a parameter in an HTTP GET request. This is what my code looks like: for (var i = 0, len = this.recentArtists.topartists.artist.length; i < len && i < h ...

Progressive File Upload in ASP.NET Core 2.0 and Angular 4.3: A Seamless Integration

Is there a way to utilize the latest Angular 4.3 HttpClient to handle file uploads and retrieval in an ASP.NET Core 2.0 Controller, all while providing live upload progress updates to the client? ...

AngularJS html5Mode Redirect Routing Not Functional

Facing issue with redirect routing in angularjs when using html5Mode To resolve the redirect issue, make sure to add this line in your app.js: $locationProvider.hashPrefix('!').html5Mode(false); There seems to be an issue with the hashPrefix no ...

Guide to setting a generic key restriction on a function parameter

Today, I decided to have some coding fun and try creating a generic pushUnique function. This function is designed to check if a new object being added to an array is unique based on a key, and then push it if it meets the criteria. At this point, all I h ...

Problem with loading image from local path in Angular 7

I'm having trouble loading images from a local path in my project. The images are not rendering, but they do load from the internet. Can someone please help me figure out how to load images from a local path? I have already created a folder for the im ...

Troubleshooting: Responsive attribute settings causing ng-click in AngularJS slick carousel to malfunction

I am utilizing the angular wrapper https://github.com/vasyabigi/angular-slick to incorporate the slick slider into my project. Each individual slide within the slider has a ng-click function set up, which directs users to a different page upon clicking. I ...

Error: Angular version 5.1.0 is unable to set the header content-type to application/json for HttpClient

I have been attempting to customize the header for a POST API request to be of content type application.json. let options: { headers?: {'Content-Type':'application/json'} } Unfortunately, this customization is not being successfully a ...

Tips for accessing a specific value within an array of objects using a key

Is there a way to retrieve the value in an object array based on a key that is present within the same array? The structure of the object array is as follows: const objectArray = [ {key: "1", value: "12321"}, {key: "2", value: "asdfas"} ] For ex ...

Arranging orders according to specific preferences in Angular

In one of my columns, I have a list of colors stored as follows: "red","blue","white","black","yellow" Instead of sorting them alphabetically, I want to customize the order like this: "yellow","blue","red","white" and "black" This custom sorting is imp ...

Error: The file type you are trying to upload is not supported

my document-upload.service.ts private uploadFile(file: File) { let formData: FormData = new FormData(); formData.append('uploadFile', file, file.name); let headers = new HttpHeaders({'Content-Type': 'multip ...

What is the best way to instantiate objects, arrays, and object-arrays in an Angular service class?

How can I nest an object within another object and then include it in an array of objects inside an Angular service class? I need to enable two-way binding in my form, so I must pass a variable from the service class to the HTML template. trainer.service. ...

Guide to incorporating code coverage in React/NextJs using Typescript (create-next-app) and cypress

I initiated a fresh project using create-next-app with the default settings. npx <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="365544535742531b58534e421b57464676070518021801">[email protected]</a> --- Would you l ...

Steps for integrating an Angular 2 App into Express.js as a view

I am currently working on developing an Angular 2 app that requires data from a script running on the server. To achieve this, I am attempting to integrate my existing Angular app as a view within an express application, similar to the process demonstrated ...

Validating dates in TypeScript

Currently, I am studying date handling and have an object that contains both a start and end date. For example: Startdate = "2019-12-05" and Enddate = "2020-05-20" My goal is to establish a condition that first verifies the dates are not empty. After tha ...

Trouble with locating newly created folder in package.json script on Windows 10

I am facing an issue in my Angular application where I am trying to generate a dist folder with scripts inside it, while keeping index.html in the root folder. I have tried using some flag options to achieve this but seem to be stuck. I attempted to automa ...