Блог

У меня есть два поля (поле 1- Поле 2), я хочу изменить место каждого поля после нажатия на кнопку

[каждый блок является компонентом]

После нажатия

Используя гибкую систему css

Это решение не требует использования ngFor. Вы можете применить его к любым статическим блокам в контейнере.

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

Используя директиву Angular ngFor и обратный массив на месте

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

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

Пример Ng-run

Я создал образец для вас здесь: Stackblitz Использует массив с количеством блоков, например, let boxes = ["box1", "box2"] и использует ngFor для рендеринга. после нажатия на кнопку используйте Array.reverse() , чтобы изменить место. Вот и все!

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