rxjs startWith but on nested array

January 1, 2023

I have a component whose rxjs listens to changes in the queryparams:

universityApplications$ = this.activatedRoute.queryParams.pipe(
    switchMap((obj) => this.httpService.getUniversityApplicationsList(this.numberOfRows, new URLSearchParams(obj).toString()).pipe(startWith(null))
  ));

And for the html

    <div class="skeleton-y5ha4dikw8f">
        <ng-container *ngIf="(universityApplications$ | async)?.data as uniData">
            <p-table [value]="uniData">
                <ng-template pTemplate="header">
                    <tr>
                        <th>Application name</th>
                        <th>University</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-detail>
                    <tr>
                        <td>{{detail.name}}</td>
                        <td>{{detail.university_name}}</td>
                    </tr>
                </ng-template>
            </p-table>
        </ng-container>
    </div>
  <p-paginator *ngIf="(universityApplications$ | async)?.pagination as paginationData" [rows]="numberOfRows" [first]="paginationData.current_page" [totalRecords]="paginationData.total" (onPageChange)="paginate($event)" #pp></p-paginator>

And this works fine. When I click through the pagination the page changes correctly. Since I’m using startWith(null) my inner data array gets wiped each time so I can see the nice skeleton screen. However the pagination also gets wiped out and I want that to always stay on screen until it gets updated. Is there a way I can only have startWith(null) only apply to the inner data array?

>Solution :

What if you introduce a dedicated observable nonNullResult$ for the paginator, that ignores null-values? E.g. you could do something like this:

Component TS:

universityApplications$ = this.activatedRoute.queryParams.pipe(
    switchMap((obj) => this.httpService.getUniversityApplicationsList(this.numberOfRows, new URLSearchParams(obj).toString()).pipe(startWith(null))
));

nonNullResult$ = this.universityApplications$.pipe(filter(x => !!x));

Component HTML:

<p-paginator *ngIf="(nonNullResult$ | async)?.pagination as paginationData" [rows]="numberOfRows" [first]="paginationData.current_page" [totalRecords]="paginationData.total" (onPageChange)="paginate($event)" #pp></p-paginator>