In my project I have 12 top users ranking by point, I got them from an api rest.

I create 2 button (showMor) and (showLess).

So in my code by default the first three users appear on the list, when i click the button showmore three users are added to the first users, each time i press the button show more three users are added until the end ( 12 users ). and vice versa when pressing the button showless, decrease three users from the list ...

the problem was when i press the button showmore 4 times, i have all the 12 users, but when i click on this button for the fifth-sixth-seventh time it is added space for other users doesn't exist, and the same for button showless when i click on this button on the first time he is hiding the first three users appear on the list by default.

I want to create a condition for the two button's :

1. when i click the button showless, i don't want it to hiding the first three users.

2. when i click the button showmore, i don't want it to add more space the the space allotted to the 12 users.

code html :

<div >
            <h2><strong>TOP 12 FANS</strong></h2>

            <div *ngFor="let top of top2"  style="width: 74%;">
                <div >
                    <div >
                        <div >
                            <div >
                                <span >
                                    <img src={{top.photoUrl}}>
                                </span>
                                <div ><a >{{top.firstname}} {{top.familyname}}</a>
                                </div>
                                <div > <img width="10px" src="../assets/localisation.png">
                                    france</div>
                            </div>
                        </div>
                        <div
                            >
                            <span><img width="25px" src="../assets/golden.png"> {{top.point}} PT</span>
                        </div>
                    </div>
                </div>
                    <button (click)="showMore()">show more</button>
                    <button (click)="showLess()">show less</button>
            </div>

code ts :

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  top2 = [];
  result = [];
  i=0;
  perChunk = 3; 

  constructor(private apiService: ApiService) { }


  ngOnInit() {
    this.getTop2();
  }

  getTop2() {
    this.apiService.gettop2().subscribe((res: []) => {
      

      var inputArray = res;
      
       this.result = inputArray.reduce((resultArray, item, index) => { 
        const chunkIndex = Math.floor(index/this.perChunk)
      
        if(!resultArray[chunkIndex]) {
          resultArray[chunkIndex] = [] // start a new chunk
        }
      
        resultArray[chunkIndex].push(item)
      
        return resultArray
      }, [])
      
      this.top2 =  this.result[0];
      console.log(res)

    });
  }

  showMore() {
    this.i  ;
      this.top2 = this.top2.concat(this.result[this.i])
      console.log(this.top2)
  }

  showLess() {
    this.i--;
    let length = this.top2.length;
    this.top2.length = length-this.perChunk;


  }
}

CodePudding user response：

Why don't you do like:

<button *ngIf="i<3" (click)="showMore()">show more</button>
<button *ngIf="i>0" (click)="showLess()">show less</button>

let me know if this solved your issue

CodePudding user response：

You can add condition in functions.

showMore() {
    if(i>=this.result.length-1){
      return;
    }
    this.i  ;
      this.top2 = this.top2.concat(this.result[this.i])
      console.log(this.top2)
  }

  showLess() {
    if(i<=0){
      return;
    }
    this.i--;
    let length = this.top2.length;
    this.top2.length = length-this.perChunk;


  }

CodePudding user response：

<button *ngIf="i<result.length-1" (click)="showMore()">show more</button>
<button *ngIf="i>0" (click)="showLess()">show less</button>

If you want to hide buttons when there is no more/less if no more users hide more button and if no less hide show less button like this.