Improve performance in angular

Published

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

Published
Categorized as angular Tagged

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq