Activate the event when the radio button is changed

Is there a way to change the selected radio button in a radio group that is generated using a for loop? I am attempting to utilize the changeRadio function to select and trigger the change of the radio button based on a specific value.

<mat-radio-group (change)="onHobbyChange()">
      <mat-radio-button *ngFor="let hobby of hobbies" [value]="hobby.favorite">
      </mat-radio-button>
</mat-radio-group>

changeRadio(value){
    const event = new MouseEvent('click', {bubbles: true});
    this.matRadioButton._inputElement.nativeElement.dispatchEvent(event);
}

I attempted to use _inputElement but it appears to always select the first element and does not trigger the change event as desired.

Answer №1

If you prefer not to utilize ngModel or formControl, you have the option of using component variables

Check out this example: View full code here

export class RadioNgModelExample {
  favoriteSeason: string;
  seasons: string[] = ['Winter', 'Spring', 'Summer', 'Autumn'];

  whenSeasonChange() {
    this.favoriteSeason = 'Summer';
  }

  onSeasonChange(event: any) {
    this.favoriteSeason = event.value;
  }
}

<label id="example-radio-group-label">Choose your favorite season</label>
<mat-radio-group
  aria-labelledby="example-radio-group-label"
  class="example-radio-group"
  (change)="onSeasonChange($event)"
>
  <mat-radio-button
    class="example-radio-button"
    *ngFor="let season of seasons"
    [value]="season"
    [checked]="season === favoriteSeason"
  >
    {{season}}
  </mat-radio-button>
</mat-radio-group>
<div>Your favorite season is: {{favoriteSeason}}</div>

<button (click)="whenSeasonChange()">Click to select Summer</button>

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

Storing past entries in a local storage using JavaScript

Currently, I am developing a JavaScript program that involves 3 input boxes. The program is designed to display whatever is typed into each input box on the page. To store and re-display previous submissions, I have implemented local storage. However, I en ...

The compiler-cli encounters an error when it comes across dynamic declarations

I have encountered a significant project that was designed with the anticipation of transitioning to Angular 2.0 and enabling AoT compilation. After obtaining all the necessary API from Angular, I found that the project worked smoothly in JiT mode with Ang ...

Problem encountered when Next.js and CSRF token interact on the server

I've integrated the next-csrf library (https://github.com/j0lv3r4/next-csrf) into my next.js app to safeguard api routes. Despite following the documentation, I'm encountering a 500 error with the following message: {"message":"Si ...

Can getters and setters be excluded from code coverage reports in Angular projects?

Looking to clean up my coverage reports for the front end portion of an angular project by removing trivial code like getters and setters. I generate my reports using npm run test-sonar -- --coverage, but everything is included in the report when I view ...

Using Electron to Show a Video Stored in the Local File System Using a Custom Protocol

Currently, I'm facing challenges while using electron to develop a basic video display application. Despite my efforts, I am struggling to show a video in the renderer by correctly implementing the registerSchemesAsPrivileged method. Although there ar ...

Is there a way to access data from a different cart template containing personalized values on Shopify?

After analyzing the values required from product.json, I realized that the current method is not efficient. The client-side ends up processing unnecessary information and every new product or option adds to the request load. Below is the script responsible ...

Can you explain Node.js and its applications as well as how it is commonly used?

A while back, during my time at IBM when I was immersed in learning, I came across something known as BlueMix, a cloud product. Within BlueMix, there was a rather primitive component called Node.js. Since that moment, I've been filled with curiosity a ...

What measures can be taken to safeguard this hyperlink?

Is there a way to conceal HTML code from the source code? For instance: jwplayer("mediaplayer").setup({ file: "http://example.com/Media.m3u8", autostart: 'true', controlbar: 'bottom', file: "http://exa ...

Validation of user input alongside input masking using jQuery

One issue that I am encountering is that form inputs with assigned masks (as placeholders) are not being validated as empty by jQuery validation. I am using: https://github.com/RobinHerbots/jquery.inputmask https://github.com/1000hz/bootstrap-validator ...

The error has not been handled properly and is being thrown at line 174 in the events.js file

I encountered an issue while trying to request data from an API, resulting in a crash on any Windows server. Can someone lend a hand with this problem? Here is a snippet of my code: app.get("/js/2806/api/products/getAllDrugs", (req, res) => { co ...

A step-by-step guide on retrieving information from Material UI components and incorporating an onSubmit feature to transmit data to the backend server

I've recently started working with react/material-UI. While working on a project, I turned to youtube videos and various resources for guidance. I opted for material-UI due to its user-friendly nature. However, I'm currently facing a challenge ...

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 ...

Developing play and pause capabilities using JavaScript for the existing audio player

Currently, I am developing a Chrome extension that includes an HTML popup with buttons to play audio files. However, I feel that my current approach is not the most efficient and I am struggling to find ways to simplify the process. The method I am using n ...

Error in JScript encountered during the downgrade to .NET Framework 2.0

Working on a Web Application project has brought about some challenges for me. Originally created in .NET 3.5, I recently found out that it has to be converted to .NET 2.0 (sigh). This transition not only caused issues with the LINQ functionalities but als ...

Troubles with setting up slash commands in discord.js v13

I am encountering an issue while trying to deploy a slash command. The error message DiscordAPIError[50035] is displayed, stating "Invalid Form Body guild_id[NUMBER_TYPE_COERCE]: Value \"undefined\" is not snowflake." const path = require('n ...

Automating the movement of a slider input gradually throughout a specified duration

I am working on a website that includes a range input setup like this: <input type="range" min="1036000000000" max="1510462800000" value="0" class="slider" id ="slider"/> Additionally, I have integrated some D3 code for visualizations. You can view ...

Issue with Angular Jasmine: expect().toHaveBeenCalled() not functioning as expected

Seeking assistance with debugging my unit test code for testing method invocation upon a button click event. The methods are functioning correctly in the app itself but not during testing: fit('Cancel button should trigger dialog modal', () => ...

incorporating a timer into a JavaScript game

I am currently working on a memory card game where I want to include a stopwatch feature. I'm looking to display the time elapsed from when the user selects the first card until they win. However, I am struggling with keeping the stopwatch running smo ...

Creating custom Moment.js plugins within an Ionic 2/Cordova project using TypeScript

In my Typescript Ionic 2 project, I am utilizing the moment.js library. To include it in my project, I use the following code snippet: import * as moment from 'moment'; Once imported, I can use moment in my component like so: let endDate = mom ...

Attempting to utilize express-load in conjunction with express 4

As a beginner in NodeJS, I encountered a problem with my code. Let me show you the issue. I am trying to load the application in the MVC pattern using express-load, but I am facing an error when defining the load order. Here is the important part of app. ...