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

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') 

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


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

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.

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.

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-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>
.selected {
  border: 2px dotted orange;

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}}
                        <img  class="avatar" style="max-height:18px" src="/assets/v2/{{verse.verse}}.png">

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
   verse = parseInt(verse)
    let index = this.range.findIndex(x=>x.verse==verse)
    if(index == -1){
    }else {
      let arrs = document.querySelector('.v_'+verse)
     // 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;

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

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


In my previous example, replace:

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


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

The selected fruit should now be red.

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

Thanks so much