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:

form-page.component.ts


@Component({
  selector: 'app-form-page',
  template: `
    <ngx-loading [show]="loading"></ngx-loading>
    <div>
      <h2>Create {{ formName$ | async }}</h2>
      <app-dynamic-form (formSaved)="formSaved($event)" [formItems]="formItems$ | async"></app-dynamic-form>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FormPageComponent implements OnInit {
  formName$: Observable<string>;
  loading = true;
  counter = 0;
  formItems$: Observable<FormItemBase<any>[]>;
  constructor(
    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) {
          formItems.push(this.toFormItem(formField));
        }
        return zip(...formItems);
      }),
      map(formItems => {
        this.loading = false;
        
        this.cd.detectChanges();
        
        return formItems;
      }),
      catchError(err => {
        this.loading = false;
        alert(`${err}`);
        this.router.navigate(['']);
        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}`);
    this.router.navigate(['']);
  }

}

Please do help me.

Source: Angular Questions