Skip to content

Instantly share code, notes, and snippets.

@navanathjadhav

navanathjadhav/app.component.ts Secret

Created Dec 26, 2020
Embed
What would you like to do?
6. Added search & records per page input
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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment