Moderné webové technológie 11 - Angular - server-side paginácia, filtrovanie a sort

Zhrnutie prednášky

Prednáška sa zaoberá implementáciou server-side paginácie, filtrovania a triedenia v Angular aplikácii na príklade zoznamu filmov, na rozdiel od predchádzajúceho riešenia s používateľmi, kde MatTableDataSource pracoval iba nad lokálne stiahnutými dátami. Cieľom je pri veľkých dátach na serveri neťahať všetky záznamy naraz, ale posielať serveru voliteľné parametre indexFrom, indexTo, search a sort a získavať iba požadovanú podmnožinu dát. Ukazuje sa rozšírenie servisnej metódy getFilms o parameter options s vlastnosťou params typu HttpParams, cez ktorú sa do URL adresy pridávajú tieto parametre pomocou metódy set. Rieši sa aj problematika typovania HttpOptions kvôli množstvu preťažení metódy HttpClient.get a bezpečné spracovanie prípadu, keď hlavičky ani token nie sú definované. Na záver sa začína prepájanie MatPaginator komponentu s FilmsList komponentom, aby sa pri zmene stránkovania (page event) volal server s aktuálnymi hodnotami rozsahu.

• - Server-side paginácia rieši problém, keď MatTableDataSource pracuje iba s lokálne stiahnutými dátami.
• - Cieľom je pri veľkých dátach sťahovať zo servera len relevantnú podmnožinu podľa indexFrom, indexTo, search a sort.
• - Servisná metóda getFilms sa rozširuje o voliteľné parametre indexFrom a indexTo, ktoré môžu byť aj undefined.
• - HttpParams sa napĺňa metódou set, ktorá je immutable a vracia nový objekt parametrov.
• - Riešenie typovania HttpOptions je nutné kvôli 14 preťaženiam metódy HttpClient.get, aby sa vrátil správny typ Observable<FilmsResponse>.
• - Použitím spread operátora a fallbacku na prázdny objekt sa ošetruje prípad, keď chýba autorizačný token.
• - Do FilmsListComponent sa cez ViewChild napája MatPaginator, ktorého output page (typu PageEvent) sa použije na volanie servera pri zmene stránky.

Zhrnutie pripravené s pomocou AI z prepisu videa.