How to manipulate the DOM element of subsequent pages of ion-slides

Ionic Framework
1

I have an implementation that requires querying a selector within the ion-slides and change their colours . This works as expected on the first page, but did not work on subsequent pages .

I noticed though that when sliding to another page from the page that seems not to work, it will then show at the point of transition.

This is how I am handling this

let arrs = document.querySelector('#v1') 
     arrs.scrollIntoView();
      arrs.classList.add('current-verse')
      arrs.setAttribute('color','primary')

it scrolls to view, but the attribute and the class are not instantaneously applied on follow-up pages .

I tried to trigger update() but still did not work

   this.slides.nativeElement.update().then(x=>{
    
      arrs.scrollIntoView();
      arrs.classList.add('current-verse')
      arrs.setAttribute('color','primary')
})

Even on the browser console, it does not work on the follow-up pages, but I edit the element on the browser, it works.

What is the right way to do this

2

Property binding. You should virtually never be interacting directly with the DOM in an Angular application, and I can see no reason for doing so here.

3

Thank you @rapropos, What I am working on is a series of audio files, whose text are already on the page. I only want the current track highlighted , and these tracks are dynamic.

I implemented this on a list without issues, but it just doesn’t work work on slides follow-up pages.

How do I use a property binding only on a selected element. sorry if this look stupid, I just can’t think straight right now.

4

Well, there are two major ways: one would be to put a boolean selected property on each backing item. The other is to keep the selection separately as a controller property, like so:

fruits = [ "apple", "banana", "cherry"];
selix = null;

<ion-slides>
  <ion-slide *ngFor="let fruit of fruits; let i = index" [class.selected]="selix === i">
    <div [innerText]="fruit"></div>
    <ion-button (click)="selix = i">select this fruit</ion-button>
  </ion-slide>
</ion-slides>

.selected {
  border: 2px dotted orange;
}
5

Thank you once more, but it’s not working yet; The item selection is automatic and not at a button click. This is how I have used your suggestion

 <ion-slides [options]="sliderConfig" (ionSlideDidChange)="slideChanged()">
            <ion-slide *ngFor="let p of pages" >
              <div >
    
                  <div class="ion-text-center " >
                      <ion-text class="ion-text-center v_{{verse.verse}}" *ngFor="let verse of range  let even = even let i = index"  id=pagev{{verse.verse}}  [class.focus]="scrollTo == verse.verse" [class.selected]="selix === verse.verse" >
                         <span >{{verse.content}}
                        </span> 
                       
                        <img  class="avatar" style="max-height:18px" src="/assets/v2/{{verse.verse}}.png">
                        
                        </ion-text>
                        
                   
                       </div>
              </div>
            </ion-slide>
          </ion-slides>

Then in my controller code behind

public selix = null;

Then the function that goes to appropriate page in the slide and meant to highlight current verse

slideToRightPage(verse){
   verse = parseInt(verse)
    let index = this.range.findIndex(x=>x.verse==verse)
    if(index == -1){
    
      if(verse>this.range[this.range.length-1].verse){
       
     this.slides.nativeElement.slideNext()
      }
      if(verse<this.range[0].verse){
       
        this.slides.nativeElement.slidePrev()
         }
     setTimeout(()=>{
      this.slideToRightPage(verse)
     },1000)
    }else {
      let arrs = document.querySelector('.v_'+verse)
      
      this.resetVerseColour()
      this.selix=verse;
    
      arrs.scrollIntoView();
     // arrs.classList.add('current-verse') 
      //arrs.setAttribute('color','primary') // this was working but only on the first page

     })
    
 
     
    }
  }

Then my css

.selected {
            border: 2px dotted orange;
            color: lightskyblue;
          }
6

Is it possible that you’re fighting a style war with ion-text? IOW, I would try doing one of the following:

  • losing all use of ion-text completely
  • working with it by binding [color] instead of a CSS class
7

Thank you, will try and loosen up the ion-text. But can you please point how I can bind this to [color] ?

Thanks

8

In my previous example, replace:

<div [innerText]="fruit"></div>

…with:

<ion-text [innerText]="fruit" [color]="selix === i ? 'danger' : ''"></ion-text>

The selected fruit should now be red.

9

You are the best. This is the second time you are bailing me out of trouble.

Thanks so much