0

I want to create several radio buttons with *ngfor.

<div class="gruendeAll"> <div class="gruende" *ngFor="let item of data"> <label for="radiogrund{{item.grund}}"> <input id="radiogrund{{item.grund}}" [value]='item.grund' value="grundValue" type="radio" name="grund" [(ngModel)]="form" class="select"> {{item.grund}} </label> </div> </div>

And the buttons are supposed to be in a grid, therefore this is my .css

.gruende { display: inline-grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; grid-gap: 2px; align-items: center; } .gruende input[type="radio"] { opacity: 0; position: fixed; width: 0; } .gruende label { display: table-cell; /* set Text in vertical center (with vertical align) */ vertical-align: middle; text-align: center; /* set Text in horizontal center */ font-size: 100%; font-family: Tahoma; background-color: #424249; color: white; width: 205px; height: 80px; border-radius: 10px; } .gruende input[type="radio"]:checked + label { background-color: #969699; }

Unfortunately the buttons are positioned among themselves and not in a grid (e.g. 3x3). I tried it with 10x <input type="radio"> and here it works. So the problem has something to do with *ngfor I guess. Also I cannot select a button, I click on the button but nothing happens (the button should change the color like its mentioned in the .css)

By the way, I am getting the data for the radio buttons out of a database (I have a Spring Boot connection). So I want to create dynamically more buttons.

Here is where I subscribe to the data:

 this.vorgangService.getGruende().subscribe(res => { this.data = res; this.grund = data.grund; this.size = this.data.length; });

I also have a formgroup in my .ts

form: FormGroup = this.formBuilder.group( { });
Improve this question
1
  • show your radiogrund code Commented Nov 29, 2019 at 10:07

2 Answers 2

Reset to default
1

Here is a way to do it with either FormGroup or Reactive forms:

https://stackblitz.com/edit/angular-rvpjjb

HTML

<form [formGroup]="myForm"> <div class="gruende"> <div class="gruende" *ngFor="let item of data"> <label class="gruende__label" [class.gruende__label--checked]="radio.checked" [for]="'radiogrund-'+item.grund"> {{item.grund}} <input #radio [id]="'radiogrund-'+item.grund" type="radio" class="select" formControlName="myRadioInput" [value]="item.grund"> </label> </div> </div> <p>Form value: {{ myForm.value | json }}</p> </form>

Component

import { Component, OnInit } from "@angular/core"; import { FormGroup, FormBuilder } from "@angular/forms"; @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent implements OnInit { myForm: FormGroup; data = [ { grund: "1" }, { grund: "2" }, { grund: "3" }, { grund: "4" } ]; constructor(private _fb: FormBuilder) {} ngOnInit() { this.buildForm(); } buildForm(): void { this.myForm = this._fb.group({ myRadioInput: [] }); } }

CSS

.gruende { display: inline-grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; grid-gap: 2px; align-items: center; } .gruende input[type="radio"] { opacity: 0; position: fixed; width: 0; } .gruende__label { display: table-cell; /* set Text in vertical center (with vertical align) */ vertical-align: middle; text-align: center; /* set Text in horizontal center */ font-size: 100%; font-family: Tahoma; background-color: #424249; color: white; width: 205px; height: 80px; border-radius: 10px; } .gruende__label--checked { background-color: #969699; }

update

To add a class to the radio button thats checked you can add an angular template reference variable <input #radio ... and on your label toggle a class based on if it is checked or not [class.gruende__label--checked]="radio.checked"

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

I still cannot select a button. And the grid is not working either.
Oh right I see, what version of Angular are you using as Reactive Forms is what you want angular.io/guide/reactive-forms.I'll update my anwser
I am using Angular 7
I still cannot select a button. I click on one and nothing happens
oh ok sorry, I see your issue, you can do that with angular, i have updated the answer
|
0

I think that problem maybe a static property id and for, Try to use dynamic [id] and [for]. Moreover you mix other dynamic and static properties in input.

 <label [for]="radiogrund{{item.grund}}"> <input [id]="radiogrund{{item.grund}}"
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.