title: Conditional nav on ionic slider
body: <p>I have configured my Ionic slider to have nav buttons as I am developing a PWA and want to include mouse interactions on desktops. I wanted to have some conditionals run to hide the PREV button when slider is at beginning and hide the NEXT button when on the last slide. I checked out solution at <a href="https://stackoverflow.com/questions/42392137/hide-and-show-on-click-in-the-ionic-2">Hide and show on click in the ionic 2</a> and made some code work for this.</p>
  
  <p>My issue is that the PREV button is not automatically hidden when Ionic slider is first presented. I cannot get this to work for me as I have initiated the check using the slideChanged() method and I don't know how to hide the PREV button on initiation (before interacting with slider).</p>
  
  <p>Here is my code:</p>
  
  <p><strong>TS File:</strong></p>
  
  <pre><code>slideChanged() {
      if (this.slides.isEnd()) {
          this.hideNext = !this.hideNext;
      }
      else if (this.slides.isBeginning()) {
          this.hidePrev = !this.hidePrev;
      }
      else {
          console.log("slide changed");
          this.hideNext = true;
          this.hidePrev = true;
      }
  }
  </code></pre>
  
  <p><strong>HTML Template</strong></p>
  
  <pre><code>&lt;ion-icon *ngIf="hidePrev" name="ios-arrow-back" float-left class="slideNav prevSlide" (click)="prevSlide()"&gt;&lt;/ion-icon&gt;
  &lt;ion-icon *ngIf="hideNext" name="ios-arrow-forward" float-right class="slideNav nextSlide" (click)="nextSlide()"&gt;&lt;/ion-icon&gt;
  &lt;ion-slides (ionSlideDidChange)="slideChanged()" pager #imageSlides&gt;
      &lt;ion-slide *ngIf="data.video"&gt;
          &lt;video controls poster="../../assets/imgs/{{category | slug}}/{{data.video}}-poster.jpg"&gt;
              &lt;source src="../../assets/imgs/{{category | slug}}/{{data.video}}.mp4" type="video/mp4"&gt;
          &lt;/video&gt;
      &lt;/ion-slide&gt;
      &lt;ion-slide *ngFor="let image of data.featured_image"&gt;
          &lt;img src="../../assets/imgs/{{category | slug}}/{{image}}.jpg" class="featured-image"/&gt;
      &lt;/ion-slide&gt;
  &lt;/ion-slides&gt;
  </code></pre>