Dynamically Creating a Radio Button name in Angular 8(Typescript, HTML, SCSS)

Question

I am having some challenges creating a radio button name Dynamically. How can I Dynamically generate a radio button name. Here is my html code

<table>
    <td>
        <input type="radio" #radio [id]="inputId" name="radio" />
        <label [for]="inputId">
        <ng-content></ng-content>
        </label>
    </td>
    <br />
    <br />
</table>

I am also passing a string to the Radio Buttton Component like this

<radio-button>
    <b>Radio Button 1</b>
</radio-button>
<radio-button>
    <b>Radio Button 2</b>
</radio-button>
<radio-button>
    <b>Radio Button 3</b>
</radio-button>
<radio-button>
    <b>Radio Button 4</b>
</radio-button>

My name attribute is hard-coded to the component like name="radio". I want to generate a dynamically assigned names for the radio button

`ng-content` projects content. Are you passing a string into the component `Radio Button Label` — Dane Brouwer, Feb 25 '20 at 04:29
Hi, I am passing a string to the Radio Buttton Component like ``` html Radio Button 1 Radio Button 2 Radio Button 3 Radio Button 4 ``` — doctore, Feb 25 '20 at 04:43
As of right now, your code works [stackblitz](https://stackblitz.com/edit/angular-cy1ptb?file=src%2Fapp%2Fapp.component.html). So I'm not sure what the issue is. — Dane Brouwer, Feb 25 '20 at 04:49
Hi, what happens is that my name attribute is hard-coded name="radio". I want a generic name( dynamically assigned names) for the radio button — doctore, Feb 25 '20 at 05:02
You could bind it to a local variable `[name]="localVariable"` — Dane Brouwer, Feb 25 '20 at 05:03
I am a bit new to this. You mentioned binding to a local variable [name]="localVariable" and what will the "local Variable" contain? — doctore, Feb 25 '20 at 05:05
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/208464/discussion-between-dane-brouwer-and-doctore). — Dane Brouwer, Feb 25 '20 at 05:05

score 1 · Answer 1 · answered Feb 25 '20 at 06:28

1

You can try a for loop inside your html and put radio button code inside that and have your radio button tag something like below:

<input type="radio" name="rbtn[{{i}}]" [attr.name]="i" [value]="" />

answered Feb 25 '20 at 06:28

Hope

475
6
16

score 0 · Answer 2 · answered Feb 25 '20 at 07:51

Note: If you pass separate name to each radio button then you will be able to select multiple radio options. If you pass same name to multiple radio buttons then you will be able to select only one radio button.

How to Pass Dynamic Name?

If <radio-button> is a separate component. then you can pass the name as an attribute to the component like this.

<radio-button name="radio-1"></radio-button>

then in your radio-button component you can accept the coming attribute with @Input decorator.

@Input name: string;

Now you can pass this variable to your component html.

<input type="radio" #radio [id]="inputId" [name]="name" />

If you want to pass the variable to the attribute then you need to use [] for one way binding.

See an example here. https://stackblitz.com/edit/angular-dynamic-radio-name

Dynamically Creating a Radio Button name in Angular 8(Typescript, HTML, SCSS)

2 Answers2