Как менять класс элемента html в зависимости от кнопок через ngClass?

Question

[annaozi]

слайдер в котором две кнопки вперед и назад , в зависиости от того что нажимает юзер нужно менять у слайдера стили
на js ето выглядит так

function onNext(){
     document.querySelector('.Slaider1_next').addEventListener('click',function(){offset= offset+347;
       document.querySelector('.slaider_mobile').style.left=`${offset}px` }
      ) 
     }
      function onPrev(){
        document.querySelector('.Slaider1_prev').addEventListener("click", 
          function(){
        offset-347;
           document.querySelector('.slaider_mobile').style.left=`${offset}px`}
       );   }

я читала что в ангуляре не используется dom через уязвимость через дом к xss атакам .
но нашла замену через ngClass or ngStyle

<div class="step3_mobile" ngClass="slider()">
        <div class="slaider_mobile">
            <app-carousel  *ngFor="let contact of contacts" [title]="contact.title" [text]="contact.text" [img]="contact.img" ></app-carousel>
     
        </div>
    </div> 
    <button class="Slaider1_prev" ngClass="sliderPREV()" ></button>
    
    <button class="Slaider1_next" ngClass="sliderNEXT()" ></button>

помогите пожалуста реализовать на ангуляре:)

Comments

[Максим Федоров]

почему вы справшиваете про ангуляр, а код компонента не ангуляровский, а нативный js?
это AngularJS?

Answer 1

[Максим Федоров]

сделайте activeContact в компоненте
при кнопке next меняйте активный this.activeContact = тут номер например активного таба, для активного таба добавляйте класс

<div class="slaider_mobile">
<ng-container *ngFor="let contact of contacts">
     <app-carousel 
           [class.contact_item]="true"
           [class.contact_item--active]="isActive(contact)"

           [title]="contact.title" 
           [text]="contact.text" 
           [img]="contact.img"
    ></app-carousel>
<ng-container>
</div>

<button class="Slaider1_prev" (click)="prev()"  type="button"></button>
<button class="Slaider1_next" (click)="next()"  type="button"></button>

для класса .contact_item--active уже опишите стили

в компоненте (код на коленке, плохой, на основании ваших данных):

this.activeContact: Contact = this.contacts[0].title;

isActive(contact: Contact): boolean {
     return contact.title === this.activeContact.titile;
}

next() {
     // ищем актуальный контакт
     const actualIdx = this.contacts.findIndex((c) => {
          this.activeContact.title === c.title;
     })

     // присваиваем следующий, или первый, если сейчас актуальный контакт — последний в списке
     const nextIdx = actualIdx + 1;
     this.activeContact = nextIdx === this.contacts.length - 1 
          ? this.contacts[0]
          : this.activeContact[nextIdx];
}

prev() {
     // ищем актуальный контакт
     const actualIdx = this.contacts.findIndex((c) => {
          this.activeContact.title === c.title
     })

     // присваиваем предыдущий, или первый, если сейчас первый из списка — к последнему в списке
     const prevIdx = actualIdx + 1;
     this.activeContact = prevIdx === 0; 
          ? this.contacts[this.contacts.length-1]
          : this.activeContact[prevIdx];
}