是否有角度4的js dom操作的替代方案？

Question

我有这个循环包含3个项目的集合：

<ng-template ngFor let-person="$implicit" 
[ngForOf]="peopleAsPreviousCurrentAndNextTriplets" let-first="first">
  <app-card
    [class.currentCard] = "first" 
    [prevCard]          = "first ? person.previous : null" 
    [currentCard]       = "first ? person.current : null" 
    [nextCard]          = "first ? person.next : null"
   ></app-card>
</ng-template>

如果你检查dom，你会看到以下内容：

现在我的想法是我需要根据按钮点击操作上面的dom，其中：

1. 第一个<app-card>组件被推送到最后一个
2. 第二个<app-card>被推到前面
3. 最后<app-card>被推到第二个

使用js我可以很容易地做到这一点，但我讨厌直接操作dom的想法。是否可以在"angular 4"方法中进行。

由于