6. Added search & records per page input

app.component.ts

  
  constructor(private fb: FormBuilder, private cdr: ChangeDetectorRef) {}

  // Defaults
  form!: FormGroup;
  students: any = [];
  searchTerm: string = '';
  reload: EventEmitter<boolean> = new EventEmitter();
  isLoadingStudents: boolean = false;
  recordsPerPage: number = 5;

  // On init
  ngOnInit(): void {
    this.buildForm();
  }
  
  // On After view checked, detect changes manually
  ngAfterViewChecked(): void {
    this.cdr.detectChanges();
  }


  // Init form
  buildForm() {
    this.form = this.fb.group({
      term: ['', [Validators.required]],
      recordsPerPage: [''],
    });
  }

  // On form submit => assign search term
  submitForm(): void {
    if (this.form.invalid) {
      return;
    }
    this.searchTerm = this.form.value.term;
  }

  // Clear search results on search box empty
  clearSearchResult() {
    if (this.form.controls.term.value === '' && this.searchTerm) {
      this.searchTerm = '';
      setTimeout(() => {
        this.reload.emit(true);
        this.reload.emit(false);
      }, 100);
    }
  }