Randomize and Limit ngFor List Items on HTML - html

Question

I have a large JSON file and am trying to randomize and limit the ones that are shown to a list item on HTML. The file has more than 100 items but I would like to show only ten at a time.
I understand doing this by pagination on the server side would be better but this project is to be used locally and for learning purposes only.
This is a project based on this repository. It is basically the same but I would like handle more items by paginating it on the client side(hero-list.component.html). It would be worth checking it out. Otherwise I will paste below the important part.
Can someone help me?
hero.service.ts
import { Injectable } from '#angular/core';
import {
EntityCollectionServiceBase,
EntityCollectionServiceElementsFactory
} from '#ngrx/data';
import { Hero } from '../core';
#Injectable({ providedIn: 'root' })
export class HeroService extends EntityCollectionServiceBase<Hero> {
constructor(serviceElementsFactory: EntityCollectionServiceElementsFactory) {
super('Hero', serviceElementsFactory);
}
}
hero-list.component.ts
import {
Component,
EventEmitter,
Input,
Output,
ChangeDetectionStrategy
} from '#angular/core';
import { Hero } from '../core';
#Component({
selector: 'app-hero-list',
templateUrl: './hero-list.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class HeroListComponent {
#Input() heroes: Hero[];
#Output() deleted = new EventEmitter<Hero>();
#Output() selected = new EventEmitter<Hero>();
selectHero(hero: Hero) {
this.selected.emit(hero);
}
deleteHero(hero: Hero) {
this.deleted.emit(hero);
}
// trackByHero(hero: Hero): string {
// return hero.id;
// }
trackByHero(_ /* index not used */: number, hero: Hero): string {
return hero.id;
}
}
hero-list.component.html
<ul class="list">
<li
*ngFor="let hero of heroes; trackBy: trackByHero; let i = index"
role="presentation"
>
<div class="card">
<app-card-content
[name]="hero.name"
[description]="hero.description"
></app-card-content>
<footer class="card-footer">
<app-button-footer
class="card-footer-item"
[className]="'delete-item'"
[iconClasses]="'fas fa-trash'"
(clicked)="deleteHero($event)"
label="Delete"
[item]="hero"
></app-button-footer>
<app-button-footer
class="card-footer-item"
[className]="'edit-item'"
[iconClasses]="'fas fa-edit'"
(clicked)="selectHero($event)"
label="Edit"
[item]="hero"
></app-button-footer>
</footer>
</div>
</li>
</ul>
db.json:
{
"heroes": [
{
"id": "HeroAslaug",
"name": "Aslaug",
"description": "warrior queen"
},
{
"id": "HeroBjorn",
"name": "Bjorn Ironside",
"description": "king of 9th century Sweden"
},
{
"id": "HeroIvar",
"name": "Ivar the Boneless",
"description": "commander of the Great Heathen Army"
},
{
"id": "HeroLagertha",
"name": "Lagertha the Shieldmaiden",
"description": "aka Hlaðgerðr"
},
{
"id": "HeroRagnar",
"name": "Ragnar Lothbrok",
"description": "aka Ragnar Sigurdsson"
},
{
"id": "HeroThora",
"name": "Thora Town-hart",
"description": "daughter of Earl Herrauðr of Götaland"
}
]
}
Appreciate it!

Answer 1

A "pagination" if you has all the elements in an array is simply use slice pipe
You has two variables
page:number=0 //the first page is 0
pageSize:number=10
<li *ngFor="let hero of heroes|slice:(page*pageSize):(page+1)*pageSize;
let i = index">
...
</li>
To randomize an array simply use
arrayRandom=this.heroes.map(x=>({ord:Math.random(),data:x}))
.sort((a,b)=>a.ord>b.ord?1:a.ord<b.ord?-1:0)
.map(x=>x.data)