Hacktoberfest part 3!

Sarika Hanif
Oct 21 · 2 min read

I just finished my third pull request for this month! I decided to revisit the badger repository from my last pr. I quite like this project. I ended up running the project locally again and played around with it some more. I came across an issue where, if you set the show items per page to 50 and click on the last page number in the pagination, it reverts back to the first page.

I looked into the code and checked out the badge-list.component.ts and looked over the functions. I looked at the _page and _itemsPerPage variables and function and compared it to the html of the dropdown and pagination.

@SessionStorage("badge-list.page")
private _page: number = 1;
get page(): number {
return this._page;
}
set page(value: number) {
this._page = value;
this.update();
}
@SessionStorage("badge-list.itemsPerPage")
private _itemsPerPage: number = 50;
get itemsPerPage(): number {
return this._itemsPerPage;
}
set itemsPerPage(value: number) {
this._itemsPerPage = value;
this.update();
}
<div class="form-inline">
<pagination [totalItems]="totalItems" [(ngModel)]="page" [maxSize]="5" [itemsPerPage]="itemsPerPage" (numPages)="pageCount = $event" boundaryLinks="true" previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;"></pagination>
<ul class="pagination">
<li>
<div class="form-text page-count">{{pageCount}} Page(s)</div>
</li>
<li>
<select class="form-control" [(ngModel)]="itemsPerPage">
<option value="10">10 items per page</option>
<option value="20">20 items per page</option>
<option value="50">50 items per page</option>
<option value="100">100 items per page</option>
<option value="500">500 items per page</option>
<option value="">All</option>
</select>
</li>
</ul>
</div>

I was confused about how the variables were bound, because they didn’t match in the .ts file and the html file. I found that it wasn’t actually the variable, but the get function that was being used. For example, [(ngModel)]=”page” versus [(ngModel)]=”_page”. Now that I got the idea of how it worked I looked into the update function that was called after every set. Within the function I saw this code block.

if (this._page * this.itemsPerPage > this.totalItems) {
this._page = 1;
}

I figured this was what was causing the issue. There’s about 1500 items in total. So whenever I clicked on page 4 (the last number in the pagination), it was multiplying 500 (items per page) by 4, resulting in the condition being true and setting the pagination back to zero. I created a pr by removing this block of code in this .ts file and in the character-badge-checklist.component.ts file(something I forgot to do in the other pull request). The owner replied back stating that that block of code was added to fix a ‘content changed after view render’ error and suggest that I modify the code to

if ((this._page - 1) * this.itemsPerPage > this.totalItems) { this._page = 1; }

He ended up applying the change. Now the pagination works! I learned quite a bit from this experience. After exploring this repo, I found out more about binding, component selectors and sharing data through input and output decorators.

Open Source Student

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade