CODEWITHSUNDEEP
htmlcssangular
JumpIntoTheWater
JumpIntoTheWater

Reputation: 1336

change the order of elements inside a DIV tag

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>

And when a variable changes, I would like the order inside the div to be changed to be :

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

How can I do that?

Upvotes: 0

Views: 85

Answers (1)

Get Off My Lawn
Get Off My Lawn

Reputation: 36309

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'
}

Upvotes: 1

Related Questions