rxjs startWith but on nested array

Question

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?

kellermat · Accepted Answer · 2023-01-01 09:37:34Z

1

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>

answered Jan 1, 2023 at 9:37

kellermat

4,8515 gold badges12 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

rxjs startWith but on nested array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related