How to utilize ngModel for binding to radio buttons in Angular 2

When the value is "N" for Non Rule Based and "R" for Rule based, I need to dynamically select the corresponding Radio button in the UI.

In ts.

this.vGroup = this.arr.vzGroup; // the value of vGroup is either "R" or "N"

To accomplish this, I must create a radio button in the UI with options for "Rule" and "Non Rule", ensuring that the correct option is pre-selected.

This is my attempt:

<input type="radio" name="optradio" [checked]=" *ngIf="vzGroup=='R'" ? 'true' : 'false' ">
    <input type="radio" name="optradio" [checked]=" *ngIf="vzGroup=='N'" ? 'true' : 'false' ">

Answer №1

Could this be the solution you're after?

<input type="radio" name="options" [checked]="selection=='A'">
<input type="radio" name="options" [checked]="selection=='B'">

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

Angular 6 - Using properties in classes

Considering a component structured as follows: import { Component, OnInit, ViewChild } from '@angular/core'; @Component({ selector: '...', templateUrl: './...html', styleUrls: ['./...scss'] }) export class Te ...

Showcasing every element within an array property using Angular 2

I'm working on a TypeScript component that defines two interfaces: interface Project { name: string; activity: string; lastBuildStatus: string; lastBuildTime: string; lastBuildLabel: string webUrl: string; } interface GoArray { projects: Array<Pr ...

Steps to change the value of a file input field

To successfully update the user details with the image path returned from the server after a successful upload, I need to change the value of the avatar field to this.imageUrl. The current issue is that the avatar field has a null value even after attempti ...

What is the method for accessing the string value of a component's input attribute binding in Angular 2?

In my Angular2 application, I have a straightforward form input component with an @Input binding pointing to the attribute [dataProperty]. The [dataProperty] attribute holds a string value of this format: [dataProperty]="modelObject.childObj.prop". The mod ...

How can you obtain the key that comes after or before an existing key in a sorted TypeScript string enum?

Given the key STEPS.GENDER and the string enum below export enum STEPS { NAME = "name", GENDER = "gender", BIRTHDAY = "birthday", SUCCESS = "success" } Is there a way to programmatically determine the next o ...

Issues arise when attempting to extract data from a data provider using JSON within the context of the Ionic framework

Hey there! I'm relatively new to the world of Angular and Ionic, and I've embarked on a project to create a pokedex app. My approach involves using a JSON file containing an array of "pocket monsters". However, my current challenge lies in extrac ...

Combining Vue2 with Typescript can sometimes result in a missing field in an object when assigning a Prop to

If I am using TypeScript version 4.1 and have a component structured like this. @Component export default class Test extends Vue { @Prop() private msg!: string; private testObj={ msg: this.msg, test: 123 } created(){ console.log(JSON. ...

Exploring the power of Angular CLI and webpack

Exploring the capabilities of angular cli https://github.com/angular/angular-cli#documentation After creating a basic app, I can easily access it on localhost. Upon inspecting the localhost site, I notice the css and js links that are added by webpack. ...

NgModel in Angular 4 does not support one-way binding with Observables

https://i.sstatic.net/TWuEe.pnghttps://i.sstatic.net/WeG4t.png In my code, I have created an array with Observables. The array is visible in the console.log, but when I click on the dropdown, only the id or name appears. What I want is for the string asso ...

The mystery of 'this' being null in Angular 2 service base class inheritance

I'm trying to create a universal error handler for my services using inheritance, but I'm facing an issue where 'this' is always null in the error handler. I can access the error handler, but I keep getting the following error: EXCEP ...

"Curious why the change event doesn't trigger when selecting an option that is already selected

Angular reactive forms are causing an issue where the change method for select field does not fire when selecting an already selected option. You can view an example of this behavior at the following link: https://stackblitz.com/edit/angular-2e1cvz. In t ...

What is the solution to fixing the error message "Cannot redeclare block-scoped variable 'ngDevMode' "?

I encountered this error: ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'. src/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451 ...

The server sends a response with a MIME type that is not for JavaScript, it is empty

I am trying to integrate an angular application with cordova. Upon running "cordova run android" and inspecting it in Chrome, the console displays the following message: "Failed to load module script: The server responded with a non-JavaScript MIME t ...

Angular 10 Compilation Error "NG8001 error: The element 'mat-card-title' is not recognized:

Recently, I encountered a compile error while trying to view my changes locally using the command 'ng serve'. The error is related to all of the imported modules in my components and displays messages like: 1. If 'mat-card-title' is an ...

The error message "Angular 4 does not recognize the 'dragula' property as a valid property of the 'div' element" is displayed

Struggling to integrate ng2-dragula with the AspNetCore SPA template. Despite trying various solutions, I am still encountering the following error: Exception: Call to Node module failed with error: Error: Template parse errors: Can't bind to 'd ...

Can routerLink navigate internally without causing a page refresh, and what is the difference when using <a href in this scenario?

I comprehend that when using routerLink, internal navigation occurs without a page refresh. My question is, if I utilize <a href, does it result in internal navigation or does it trigger a page refresh? ...

What is the most effective way to access a variable from a service in all HTML files of Angular 2/4 components?

In my angular 4 project, I have an alert service where all components can set alerts, but only specific components display them in unique locations. My question is: how can I access a variable from this service across all HTML files? The structure of my s ...

Utilizing lazy loading in conjunction with ngFor to optimize performance

I encountered the error Can't bind to 'ngForOf' since it isn't a known property of 'li'. Despite trying the suggested solutions, such as importing BrowserModule in the main module (app.module.ts) and importing CommonModule in ...

I encountered an error when trying to install '@angular/cli' using the command 'sudo npm install -g @angular/cli' on Ubuntu

Encountering a problem while attempting to install Angular-CLI on Ubuntu My current Node.js and npm versions are as follows: Node-v9.11.1 npm - 5.6.0 The command I ran was: savera9@savera9-desktop:~$ sudo npm install -g @angular/cli Howev ...

What is the reason behind webpack attempting to interpret my readme.md files?

When using Webpack, I encountered the errors below. Despite the build appearing to be successful, I am still puzzled as to why these errors are occurring. WARNING in ./{snip}/readme.md Module parse failed: C:{snip}\readme.md Unexpected token (1:7) Y ...