I have been working on an app with Angular 2+.
I am currently working on loading more items at the click of a "Load more" button.
In users.component.ts
I have:
import { Component } from '@angular/core';
import { Employee } from '../../models/empModel';
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.css'],
})
export class UsersComponent {
public itemsNumber: number = 4;
public more: Boolean = true;
public empsArray: Employee[] = [
{ empno: 10256, ename: 'Scott', job: 'Manager', deptno: 10 },
{ empno: 10257, ename: 'Smith', job: 'Lead', deptno: 20 },
{ empno: 10258, ename: 'Sandy', job: 'Programmer', deptno: 30 },
{ empno: 10259, ename: 'Sam', job: 'Tester', deptno: 40 },
{ empno: 10260, ename: 'Jane', job: 'Manager', deptno: 10 },
{ empno: 10261, ename: 'Jim', job: 'Lead', deptno: 20 },
{ empno: 10262, ename: 'Prter', job: 'Programmer', deptno: 30 },
{ empno: 10263, ename: 'Andrew', job: 'Tester', deptno: 40 },
{ empno: 10264, ename: 'Andy', job: 'Manager', deptno: 10 },
{ empno: 10265, ename: 'Gina', job: 'Lead', deptno: 20 },
{ empno: 10266, ename: 'John', job: 'Programmer', deptno: 30 },
{ empno: 10267, ename: 'Alice', job: 'Tester', deptno: 40 },
];
public loadMore() {
if (this.itemsNumber >= this.empsArray.length) {
this.more = false;
} else {
this.itemsNumber += this.itemsNumber;
this.more = true;
}
}
}
In users.component.html
I have:
<table class="table table-bordered">
<thead>
<tr>
<th>Employee Number</th>
<th>Employee Name</th>
<th>Employee Job</th>
<th>Employee Deptno</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of empsArray | slice: 0:itemsNumber">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div *ngIf="more" class="my-2 d-flex align-items-center justify-content-center">
<button (click)="loadMore()" class="btn btn-primary">Load more</button>
</div>
The problem
I want the div above - containing the button - to hide when the last item in the empsArray
loads.
Instead, it only disappears only of I click the button once more, after the last item has loaded.
Questions
- What am I doing wrong?
- What is the most reliable way to fix this issue?
Comments
Post a Comment