how to use showMore showLess for top 20 users in angular

I have 20 top users with ranking by point, I got them from an api rest, so i’m trying to create a button (showMore – showLess).

At first it shows 10 users automatically and when i click showMore it will add the other 10 users that’s mean 20 users. but when i click showLess it will reduce the 10 users to show just the 10 users.

html code :

        <div class="col-md-6  text-center">
            <h2><strong>TOP 20 FANS</strong></h2>

            <div *ngFor="let top of top2" class="rank" style="width: 74%;">
                <div class="data-row">
                    <div class="row-user">
                        <div class="col-lg-4 col-md-7 col-sm-7 col-7">
                            <div class="rank-row">
                                <span class="logo-wrapper ">
                                    <img src={{top.photoUrl}}>
                                </span>
                                <div class="td-wrap"><a class="uni-link">{{top.firstname}} {{top.familyname}}</a>
                                </div>
                                <div class="location "> <img width="10px" src="../assets/localisation.png">
                                    france</div>
                            </div>
                        </div>
                        <div
                            class="col-lg-4 offset-lg-0 col-md-12 offset-md-0 col-sm-11 offset-sm-1 text-center">
                            <span><img width="25px" src="../assets/golden.png"> {{top.point}} PT</span>
                        </div>
                    </div>
                </div>
            </div>

ts code :

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: any;



  constructor(private apiService: ApiService) { }


  ngOnInit() {
    this.getTop2();
  }

  getTop2() {
    this.apiService.gettop2().subscribe(res => {
      this.top2 = res;
      console.log(res)
    });

  }



}

so i’m trying to create array inside an array, and in every array i have 10 users for example :

array : [{ },{ },{ },{ },{ },{ },{ }….] —> [ [ { },{ },{ },{ }] , [ { },{ },{ },{ } ] ]

let data =[ ]

data = t[0]

showMore i++ –> data.push() t[1]

showLess i–