Показать или скрыть кнопки «Предыдущая» и «Следующая» на основе первого и последнего div в angular2

Question

У меня есть требование, где я хочу скрыть или показать кнопки «Предыдущая» и «Следующая», основанные на теге div. В основном я создаю теги div для каждого значения списка, используя цикл ngfor в angular2.

Список, который я использовал

appUlist:string[] = ["Calculus-1","Geometry-1","Algebra-1","Trignometry-1","Statstics-1","Arithmetic-1"]

Теперь я создаю тег div для каждого значения в списке, используя ngFor в html. Поскольку в списке более 5 значений, я использовал кнопки «Далее» и «Предыдущая», чтобы я мог видеть другие теги Div, как только я нажму кнопку «Следующая». Эта часть работает довольно хорошо. но я хочу скрыть предыдущую кнопку, если я показываю первый тег div, и скрыть следующую кнопку, если больше нет тегов div.

Пожалуйста, посоветуйте мне это Ниже я разместил html и ts код

    export class AppComponent{
      @ViewChild('panel', { read: ElementRef }) public panel: ElementRef<any>;
     public selectedDiv;
     public u;
      title = 'app';
      name:string = 'Creating new screen for student';

     public appUlist:string[] = ["Calculus-1","Geometry-1","Algebra-1","Trignometry-1","Statstics-1","Arithmetic-1"]
     }
//scrolls back when clicked on prev
    public onPreviousSearchPosition(): void {
      this.panel.nativeElement.scrollLeft -= 20
    }
 //scrolls forward when clicked on next button     
      public onNextSearchPosition(): void {
     this.panel.nativeElement.scrollBy(20,0);
     }

Мой HTML-код

         <div #panel class="row" style="width:700px;height:300px;overflow-x: scroll;overflow: hidden;" >
        <div class="col-lg-1">
 <i class="fa fa-angle-double-left" style="font-size:36px;color:#1092B0" id="left" (click)="onPreviousSearchPosition()"></i>
</div>  
        <div class="col-lg-1 cardhover" *ngFor="let u of appUlist">
                    <h1>test</h1> 
         </div>
<div class="col-lg-1">
    <i class="fa fa-angle-double-left" style="font-size:36px;color:#1092B0" id="right" (click)="onNextSearchPosition()"></i>
</div>
    </div>

Ниже изображение представляет вывод mycode

Answer 1

Вы можете поместить переменную в 0 в appComponent и увеличивать / уменьшать ее каждый раз, когда вы нажимаете prev и next. Если эта переменная == 0, вы не показываете кнопку prev, если она равна длине вашего списка - 3, вы не показываете следующую кнопку:

export class AppComponent{
      @ViewChild('panel', { read: ElementRef }) public panel: ElementRef<any>;
     public selectedDiv;
     public u;

     public index = 0;
      title = 'app';
      name:string = 'Creating new screen for student';

     public appUlist:string[] = ["Calculus-1","Geometry-1","Algebra-1","Trignometry-1","Statstics-1","Arithmetic-1"]
     }
//scrolls back when clicked on prev
    public onPreviousSearchPosition(): void {
      this.panel.nativeElement.scrollLeft -= 20
      this.index--;
    }
 //scrolls forward when clicked on next button     
      public onNextSearchPosition(): void {
     this.panel.nativeElement.scrollBy(20,0);
      this.index++;
     }

и

 <div #panel class="row" style="width:700px;height:300px;overflow-x: scroll;overflow: hidden;" >
        <div class="col-lg-1">
 <i *ngIf="idx != 0" class="fa fa-angle-double-left" style="font-size:36px;color:#1092B0" id="left" (click)="onPreviousSearchPosition()"></i>
</div>  
        <div class="col-lg-1 cardhover" *ngFor="let u of appUlist">
                    <h1>test</h1> 
         </div>
<div class="col-lg-1">
    <i *ngIf="idx < list.lenght - 3" class="fa fa-angle-double-left" style="font-size:36px;color:#1092B0" id="right" (click)="onNextSearchPosition()"></i>
</div>
    </div>