I have a search engine with nearly 70 fields and the problem appears when the user tries to input a text or select a dropdown. It is slow and it renders with a delay of 4-5 seconds.
I have separated the form from the parent component and passed the formgroup as an input.
<search-engine-form [searchEngineForm]="searchEngineFormGroup" [fields]="fields"></search-engine-form>
Inside the SearchEngineFormComponent detection change is set to: OnPush.
@Component({
selector: 'search-engine-form',
templateUrl: './search-engine-form.component.html',
styleUrls: ['./search-engine-form.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SearchEngineFormComponent implements OnInit {
@Input() searchEngineForm: FormGroup;
@Input() fields: SearchEngineFields[];
}
Also this is how I manage the dynamic form:
<ng-container *ngSwitchCase="'Textfield'">
<input type="text" [formControlName]="field.reference" class="form-control">
</ng-container>
This problem does not seem to persist on production mode.
Can you please help understand what other improvements can be made apart from ChangeDetection?
In this situation either it is the filtering or the rendering that can cause the problem.
If the problem is the filtering, then you have to debounce the event that triggers the search using an rxjs subject and debounce it using the pipe operator.
If it is the rendering then you have to take advantage of the virtual scroll component provided by CDK
