What is the best way to change the place of each box in Angular

I created a sample for you here: Stackblitz Use an array of the number of box e.g let boxes = ["box1", "box2"] and use ngFor for rendering the. after clicking on button use the Array.reverse() to change the place. That's it!

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public boxes: string[] = ["Box1", "Box2"];

  toggle() {
    this.boxes.reverse();
  }
}

app.component.html

<div class="main-container">
  <div class="box-container" *ngFor="let box of boxes">{{box}}</div>
  <button class="btn btn-success" (click)="toggle()">Change order</button>
</div>

app.component.css

.box-container {
  margin: 10px;
  padding: 5px;
  border: solid 2px black;
  text-align: center;
}

Using css flex system

This solution doesn't require using ngFor. You can apply it to any static blocks in a container.

html

<div class="flex-column" [class.reversed]="reversed">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
</div>

<button (click)="reversed = !reversed">Change order</button>

css

.flex-column {
  display: flex;
  flex-direction: column;
}

.reversed {
  flex-direction: column-reverse;
}

Using Angular ngFor directive and reverse array in place

<div *ngFor="let box of boxes" class="box box-{{box}}">Box {{ box }}</div>

<button (click)="boxes.reverse()">Change order</button>

Ng-run Example