Slides [pager]="!showPagination" only works once... (hide id)

Ionic Framework
1

I like to hide the pagination of the slides in some circumstances.
I can let them disappear but not vise versa.
Is that a Bug in ionic 4. Or do I miss something.

Thank you.

<ion-slides [pager]="!showCalc">
  <ion-slide>
    <ion-grid>
      
      <ion-row>
        <ion-col>
            Page 1
        </ion-col>
      </ion-row>
        <ion-row>
            <ion-col>
                <ion-button (click)="switchStatus()">
                    <ion-icon name="sync"></ion-icon>
                    <ion-label>Switch</ion-label>
                  </ion-button>
            </ion-col>
      </ion-row>
    </ion-grid>

  </ion-slide>
  <ion-slide>Page 2</ion-slide>
</ion-slides>


switchStatus(){
    this.showCalc = !this.showCalc;
  }
2

Could you try, if this code would work for you?

// In your markup

<ion-slides [pager]="this.showCalc">
  <ion-slide>
    <ion-grid>
      
      <ion-row>
        <ion-col>
            Page 1
        </ion-col>
      </ion-row>
        <ion-row>
            <ion-col>
                <ion-button (click)="switchStatus()">
                    <ion-icon name="sync"></ion-icon>
                    <ion-label>Switch</ion-label>
                  </ion-button>
            </ion-col>
      </ion-row>
    </ion-grid>

  </ion-slide>
  <ion-slide>Page 2</ion-slide>
</ion-slides>

// In your module

protected showCalc: boolean = true;

protected switchStatus(): void {
    this.showCalc = !this.showCalc;
	return;
}

Hope it helps!

Cheers
Unkn0wn0x

3

Nope.
Is there a difference?

I think my method does not really matter. It also does not work: this.slides.pager = false; (so far so good) but: this.slides.pager = true; (nope, didn’t show again)

4

I could imagine, that the pager is a initial component, which needs to be defined whilst rendering the component first. That the component can be removed, but not re-created again could be the explanation (because of missing relation to it’s parent).

Could you try to select the markup element of the pager via ViewChild or document.querySelector() and style it by yourself with display: none and display: initial? So you just visually show and hide it?

protected switchStatus(): void {
	
	// Or select it initally in your component with a variable
	const: pagerNode: HTMLElement = document.querySelector('the-pager-node');

	// Update the value here or execute logic on the state of the styling `display` 
    this.showCalc = !this.showCalc;

	// Hide / show the node
	if (this.showCalc) {
		pagerNode.style.display = 'initial';
	} else {
		pagerNode.style.display = 'none';
	}
	return;
}

I didn’t found any documentation about the pager element, regarding to your case :frowning:

Cheers
Unkn0wn0x

5

This Workaround does it.

A warm thank you Unkn0wn0x!

6

Glad I could help! :slight_smile:

Cheers
Unkn0wn0x