What causes the dallied hiding of the load more button in this Angular app?

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

1. What am I doing wrong?
2. What is the most reliable way to fix this issue?

Via Active questions tagged javascript - Stack Overflow https://ift.tt/fqZh9d3