Angular - can i limit the no of dynamically created cards on the page?

user_15413859 0
Viewed 137
    <div class="row">
        <div class=" col-xl-8 offset-xl-2">
            <div class=" row">
                <div *ngFor="let pokemon of pokemons | searchFilter: filterName:'name'; let i = index " class=" col-md-6">
                    <div style="border-radius: 15px 50px;" class="card mb-3 bg-{{getType(pokemon)}}"
                        [routerLink]="['/view', pokemon.name]">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-7 col-sm-8">
                                    <h3 class="card-title">{{pokemon.name | titlecase}}</h3>
                                    <span *ngFor="let type of pokemon.types  "
                                        class="badge border rounded-pill me-1 bg-{{getType(pokemon)}}">
                                        {{type.type.name | titlecase}}
                                    </span>
                                </div>
                                <div class="col-5 col-sm-4">
                                    <img src="https://pokeres.bastionbot.org/images/pokemon/{{pokemon.id}}.png"
                                        class="img-fluid" alt="...">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm text-center">
            <button class="btn draw-border" (click)="loadMore()">
                <div class="spinner-border spinner-border-sm" role="status" *ngIf="loading"></div>
                {{loading ? 'Loading...' : 'Load More'}}
            </button>
        </div>
    </div>
</div>

This is my code nothing special just a simple ngfor , currently the ngfor dynamically creates about 30 cards (don't know exactly) before the button to load more appears , I'm using infinite scrolling btw , so can I limit the number of cards created to about say 10-15 before ,and then the button to load more appears , is this doable?

angular css arrays html
2 Answers

I’m making the assumption that the load more button will fetch more results from the api if it is currently showing all results.

If you are initially loading 30 but only want to show 10 initially and 10 more each button press o would give two possible solutions.

  1. Update API If you have access to the Api and can pass in Params for pagination results. I would go that route first, since it is the cleanest. If not maybe the second option instead.

Or

  1. Update the component to manage your results array. It can be done as so in the TypeScript file.
    pokemons: Pokemon[] =[]
    pokemonBuffer: Pokemon[] = [] // holds the Pokemon you have but not yet showing
    countToLoad = 10;
    
    ngOnInit() {
        this.loadMore();
    }

    loadMore() {
      if(this.pokemonBuffer.length < this.countToLoad) {
       this.http.get(.....)
         .subscribe(results => {
            this.pokemonBuffer.concat(results);
            this.pokemon.push(this.pokemonBuffer.splice(0, this.countToLoad)
         })
       } else { // the buffer has enough, take it from there
          this.pokemon.push(this.pokemonBuffer.splice(0, this.countToLoad)
       }
     }
user_108368200

If you would like to change this just add a 'limit' query parameter to the GET request, e.g. ?=60. You can use 'offset' to move to the next page, e.g. ?limit=60&offset=60. edit : for this api this works

from the documentation ^^^

user_154138590
Related