html - change the order of elements inside a DIV tag

Question

I would like to change the order of elements inside a div dinamically in specific condition.

The original code is

<div class="radio radio-inline radio-primary">
  <input 
    id="allergyYes" 
    type="radio" 
    (click)="toggleAllergy($event)" 
    data-toggle="true" 
    [(ngModel)]="allergy.isAllergic" 
    [value]="1"
    name="allergyYes" 
  />
  <label for="allergyYes">{{selectedLanguage.yes}}</label>
</div>

Answer 1

You could use two templates and an ngif (3rd example in Description section).

This will display the content in the div if the expression evaluates to true, otherwise it will display the content from the ng-template if it evaluates to false.

<div class="radio radio-inline radio-primary" *ngIf="myVar === 'option-one';else elseBlock">
  <input id="allergyYes" 
    type="radio" 
    (click)="toggleAllergy($event)" 
    data-toggle="true" 
    [(ngModel)]="allergy.isAllergic" 
    [value]="1" 
    name="allergyYes" />
  <label for="allergyYes">{{selectedLanguage.yes}}</label>
</div>

<ng-template #elseBlock>
  <label for="allergyYes">{{selectedLanguage.yes}}</label>
  <input id="allergyYes" 
    type="radio" 
    (click)="toggleAllergy($event)" 
    data-toggle="true" 
    [(ngModel)]="allergy.isAllergic" 
    [value]="1" 
    name="allergyYes" />
</ng-template>

@Component({
  // Component settings
})
export class TestComponent {
  public myVar = 'option-two'
}