How to display only a particular set of data from response and show the remaining data when show mor-CodePudding

I have a search text box when i click on that search icon and search some value api will return results which will be some set of data like it may return 10 data or 5 data it may vary and i will display the required details in ngfor tiles. So my requirement is if i have more data like 18 results from api i don't want to show all the data to the user. I want to show only first 10 data and i will have a show more tag in the page. If i click on that it should display the remaining set of data till the length of the response. But i don't want to call the api again for displaying the remaining set of data. Any help is appreciated.

You can find how my response looks like here

and, when you click the button, you show them all:

CodePudding user response：

SOrry, I dont understand your scenario base on your prev description. Other solution. I can define slice pipe like this to slice array.

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'sliceItems'
})
export class SliceItemsPipe implements PipeTransform {

  transform(items: any[], start?: number, end?: number): any {
    if (!items) {
      return [];
    }
    if (!start && start !== 0) {
      return items;
    }
    if (!end) {
      return items.slice(start, items.length - 1);
    }

    return items.slice(start, end);
  }

}

In my case, I use attribute to control what item need to show all tags:

showMoreItem = -1

Then, inside your html:

<div fxLayout fxLayoutAlign="space-between center">
    <mat-chip-list>
        <ng-template [ngIf]="showMoreItem !== item?.id">

            <mat-chip *ngFor="let c of items | sliceItems : 0:5"
                      class="ok">
                {{c | titlecase}}
            </mat-chip>
        </ng-template>

        <ng-template [ngIf]="showMoreItem === item?.id">
            <mat-chip *ngFor="let c of items" class="ok">
                {{c | titlecase}}
            </mat-chip>
        </ng-template>

    </mat-chip-list>
    <button *ngIf="items?.length > 5" class=" mr-3 mt-1 mb-1" color="test"
            mat-mini-fab>
        <mat-icon (click)="showMoreItem = item?.id"
                  *ngIf="items?.length > 5 && showMoreItem !== item?.id"
                  class="mat-18 "
                  matTooltip="Show more Concepts">keyboard_arrow_down
        </mat-icon>
        <mat-icon (click)="showMoreItem = -1" *ngIf="showMoreItem === item?.id"
                  class="mat-18"
                  matTooltip="Hide Concepts>keyboard_arrow_up
        </mat-icon>
    </button>

</div>

You can use only one ngTemplate to use reference to slice variable, and when you click to MORE tag, that variable get size of array and slicePipe return full items. Any doubt write me.

I hope its help.

CodePudding user response：

I solved my question instead of calling the response each time. i did like this

this.finalResult = response.CongnitiveSearchResult.value;

if (response.CongnitiveSearchResult.value.length > 8) {
    this.resultList = response.CongnitiveSearchResult.value.slice(0, 9);
    this.isShowMore = true;
    this.isShowLess = false;
  }
  else {
    this.resultList = response.CongnitiveSearchResult.value;
    this.isShowMore = false;;
    this.isShowLess = false;
  }

after clicking on show more this will happen showResults() { this.resultList = this.finalResult.slice();

} i show hide less button once the last set is reached i am checking whether the last set is reached by doing this

this.resultList[this.resultList.length - 1]

if this is true then i show hide less if i click on hide less this will be called

  hideResults() {
this.resultList = this.finalResult.slice(0,9);

}