CODEWITHSUNDEEP
javascripthtmlcssangulartypescript
Tom Rudge
Tom Rudge

Reputation: 3272

Re-position a dynamically rendered element on the UI

I am building an Angular reactive form. I am pulling in an api and looping through my elements with *ngFor.

I have rendered 3 radio buttons. If 'yes' radio button is selected it shows an additional text box and hides again when the other radio buttons are selected.

The issue is that I want the text box to appear directly below the radio button, however as these are dynamic they all share the same div position that comes before the text box.

e.g.

<div><input type="radio" value="yes" /><div>
<div><input type="radio" value="no" /><div>
<div><input type="radio" value="maybe" /><div>
<textarea />

Desired result.

<div><input type="radio" value="yes" /><div>
 <textarea />
<div><input type="radio" value="no"/><div>
<div><input type="radio" value="maybe"/><div>

Is there any way I can manipulate the dom to get the desired effect?

Here is a StackBlitz example - https://stackblitz.com/edit/angular-pmupp3?file=src/app/personal/personal.component.html

Upvotes: 0

Views: 795

Answers (2)

C. Trenholm
C. Trenholm

Reputation: 360

    <div class="form-check-inline" *ngFor="let item of personal.radioButtonsdata">
        <label for="{{item.section}}" class="col-12 customradio"
            ><span>{{item.section}}</span>
            <input [value]="item" id="{{item.section}}" type="radio" formControlName="selectedButton"/>
            <span class="checkmark"></span>
        </label>
        <div class="col-md-8" *ngIf="form.get('radioButtonsGroup.selectedButton').value.section === 'yes' && item.section === 'yes'">
          <div class="col-md-8" >
                <input type="text" formControlName="title"   class="form-control" placeholder="Title">
        </div>
       </div>
      </div>
    `

You can check inside your loop if the item.section is 'yes' as well as if the yes value is selected. stackblitz link: https://stackblitz.com/edit/angular-jn3ln6?file=src%2Fapp%2Fpersonal%2Fpersonal.component.html

Upvotes: 1

Jesse Hallett
Jesse Hallett

Reputation: 2017

You might try using CSS to visually arrange elements. For example if you position the radio buttons using display: grid on the parent you can set order: <number> on the children to change the order in which the elements are displayed.

Upvotes: 0

Related Questions