Selected Angular Radio Button

Question

Selected Angular Radio Button

Back in the good ole days of basic HTML and CSS, I was able to achieve the following:

input:checked+label {
  background-color: #f00;
}

<div class="col-xs-6">
  <input type="radio" id="template-1" name="template" value="template1" checked>
  <label for="template-1">Example 1</label>
</div>
<div class="col-xs-6">
  <input type="radio" id="template-2" name="template" value="template2">
  <label for="template-2">Example 2</label>
</div>

However, when attempting to replicate the same snippet within an Angular form using ngModel, the CSS doesn't take effect upon loading. It only applies after clicking one of the buttons.

Check out the Angular Plunkr example here

It seems like the radio button is not recognizing the checked attribute? How can I ensure that my Angular radio button starts off checked and also triggers the CSS styling?

css angular

Answer 1

Answer №1

Kindly modify your component according to the instructions provided:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>Greetings {{name}}</h1>
        <div *ngFor="let example of examples" class="col-xs-6">
          <input type="radio" id="example.value" name="example" [(ngModel)]="template" [value]="example.value">
      <label for="example.value">{{example.display}}</label>
    </div>
  `,
  styles: [`input:checked + label{background-color: #f00;}`]
})
export class AppComponent implements OnInit{ 
  name = 'Angular';
  public examples = [
    { value: 1, display: 'Example 1' },
    { value: 2, display: 'Example 2' }
];
 template:string;


ngOnInit(){
   this.template = this.examples[0].value;
  }
}

We have also included a link to a plunkr demo for further reference.

Visit the Plunkr here

Answer 2

Kindly modify your component according to the instructions provided:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>Greetings {{name}}</h1>
        <div *ngFor="let example of examples" class="col-xs-6">
          <input type="radio" id="example.value" name="example" [(ngModel)]="template" [value]="example.value">
      <label for="example.value">{{example.display}}</label>
    </div>
  `,
  styles: [`input:checked + label{background-color: #f00;}`]
})
export class AppComponent implements OnInit{ 
  name = 'Angular';
  public examples = [
    { value: 1, display: 'Example 1' },
    { value: 2, display: 'Example 2' }
];
 template:string;


ngOnInit(){
   this.template = this.examples[0].value;
  }
}

We have also included a link to a plunkr demo for further reference.

Visit the Plunkr here

Answer 3

Answer №2

Latest Plunker Update

Check out the updated code here!

  <div class="col-xs-6">
        <input type="radio" id="template-1" name="template" value="template1" checked = "{1 == 1}">
        <label for="template-1">Example 1</label>
    </div>

Answer 4

Latest Plunker Update

Check out the updated code here!

  <div class="col-xs-6">
        <input type="radio" id="template-1" name="template" value="template1" checked = "{1 == 1}">
        <label for="template-1">Example 1</label>
    </div>

Answer 5

Answer №3

Here is a helpful solution for AngularJS. The user is seeking assistance with Angular...

In Angular, you have the ability to dynamically add a class based on the value of the ng-model

<input type="radio" ng-model="bool" ng-class="bool ? 'true' : 'false'">

When $scope.bool is true (or when the radio button is checked), this will add the "true" class

I haven't tested this code myself, but it should work or at least point you in the right direction.

Answer 6

Here is a helpful solution for AngularJS. The user is seeking assistance with Angular...

In Angular, you have the ability to dynamically add a class based on the value of the ng-model

<input type="radio" ng-model="bool" ng-class="bool ? 'true' : 'false'">

When $scope.bool is true (or when the radio button is checked), this will add the "true" class

I haven't tested this code myself, but it should work or at least point you in the right direction.

Selected Angular Radio Button

Answer №1

Answer №2

Answer №3

Similar questions

TypeScript code runs smoothly on local environment, however encounters issues when deployed to production

What is the most concise way to align one table row in the middle and another at the top?

Update Angular2 application's routes dynamically

Creating a sleek CSS drop-down navigation menu

Generate a dynamic vertical line that glides smoothly over the webpage, gradually shifting from one end to the other within a set duration using javascript

CSS font attribute stylus variable

Position the checkbox to the left of the label

Is there a way to duplicate the background-style:contain effect on an image?

Using HTML, CSS, and JavaScript, the main tab must include nested subtabs to enhance navigation and

Initial page load experiencing issues with paroller.js functionality

Error message: "Unable to locate HTML container when trying to create a child element in am

Tips for converting string values from an Observable to numbers using the parseFloat() method

Angular 6 - accepting an HTTP GET request as the app loads

The initial Get request does not receive data upon first attempt

The ngfor loop seems to be caught in an endless cycle of continuously executing functions and

Incorporate a linked select dropdown into the registration form

Problem with datepicker interface not aligning properly with Bootstrap grid

Issue with HTTP Interceptor not being effective when making service calls

Transitioning a JavaScriptIonicAngular 1 application to TypescriptIonic 2Angular 2 application

What is the secret to getting this nested observable to function correctly?