如何将z-index添加到angular2中的下一个div？

Question

我有3个div，如下所示。如果我点击幻灯片div内的按钮，它应该将z-index添加到下一个div并从当前div中删除z-index。前一个按钮应该有相同的行为。它应该删除z-index表格当前并添加到下一个兄弟。

      <div class="slide" ><prev></prev><next (click)="showNextSlide($event)" ></next></div>
      <div class="slide" ><prev></prev><next (click)="showNextSlide($event)" ></next></div>
      <div class="slide" ><prev></prev><next (click)="showNextSlide($event)"></next></div>

我试过这样的事情

event.target.parentNode.nextSibling.style.zIndex="1000"

我得到了以下异常

EXCEPTION: Cannot set property 'zIndex' of undefined

这是我点击下一个按钮时调用的功能

  showNextSlide(event){
    event.target.parentNode.nextSibling.style.zIndex="1000"
  }