Chris Straw
SHARE:

Angular Signals – Practical usage

Quick Reference

effect – updating Reactive Form when input changes
filterParams = input.required<BackgroundJobFilterParams>();
onFilter = output<BackgroundJobFilterParams>();
loading = false;

this.filterForm = new FormGroup({
      searchText: new FormControl<string | null>(null),
      multiSelect: new FormControl<number[]>([], { nonNullable: true }),
});

constructor() {
  effect(() => {
    this.loading = true;
    this.filterForm.patchValue(this.filterParams());
    this.filterForm.markAsPristine();
    this.filterForm.markAsUntouched();
    this.filterForm.updateValueAndValidity();
    this.changeDetectorRef.markForCheck();
    this.loading = false;
  });
}


resetFilter() {
  const filterParams = new BackgroundJobFilterParams();
  this.onFilter.emit(filterParams);
}

filter() {
  const filterParams = new BackgroundJobFilterParams();
  filterParams.fromFormGroup(this.filterForm);
  this.onFilter.emit(filterParams);
}

Resources

Written by

Chris Straw