Improve performance in angular

I am new to angular. I have a dynamic form which takes long time to load. Is there any way I could improve the performance. I think I will have to use the concept of pure pipes in order to load the form faster. But I am not sure if that is right. Please do let me know how to implement concept of pure pipes in this code. Also I would like to know if there is any other way to improve performance.

Below are the code:


  selector: 'app-form-page',
  template: `
    <ngx-loading [show]="loading"></ngx-loading>
      <h2>Create {{ formName$ | async }}</h2>
      <app-dynamic-form (formSaved)="formSaved($event)" [formItems]="formItems$ | async"></app-dynamic-form>
  changeDetection: ChangeDetectionStrategy.OnPush,
export class FormPageComponent implements OnInit {
  formName$: Observable<string>;
  loading = true;
  counter = 0;
  formItems$: Observable<FormItemBase<any>[]>;
    public route: ActivatedRoute,
    public entityService: EntityService,
    public formTypeService: FormTypeService,
    public router: Router,
    public cd: ChangeDetectorRef,
  ) {

  ngOnInit() {

    // get form name from nav params
    this.formName$ = this.route.paramMap.pipe(
      map(param => param.get('formName'))

    // load form
    this.formItems$ = this.formName$.pipe(
      switchMap(formName => {
        return this.formTypeService.getFormType(formName);
      switchMap(formType => {
        const formItems: Observable<FormItemBase<any>>[] = [];
        for (const formField of formType.formFields) {
        return zip(...formItems);
      map(formItems => {
        this.loading = false;
        return formItems;
      catchError(err => {
        this.loading = false;
        return throwError(err);

  toFormItem(formField): Observable<FormItemBase<any>> {
    const formItem = new FormItemBase(formField);
    // If the form item controlType is of type dropdown, we need to load the entities for the user to select.
    if (formItem.controlType == 'dropdown' && formItem.entityTypeId) {
      return this.entityService.getEntities(formItem.entityTypeId)
        .pipe(map(entities => {
          formItem.entities = entities;
          return formItem;
    } else {
      return of(formItem);

  formSaved(formValues) {
    alert(`Form saved!!! n ${formValues}`);


Please do help me.

Source: Angular Questions