angular - Inputs data is being displayed really slow

Question

I have an Angular Application I'm working in right now and something wrong is going on whenever I type on any of the inputs I have.

Whenever I type a letter/word, the input seems to freeze and not show the letters that I've wrote untill 5 secs or so have passed. This time increases the longer I write without waiting. (If I write 3 words, this time might increase to 6-7 seconds)

(See the gif for reference : https://giphy.com/gifs/7GwjjFBSGn8iWTQTXv )

I thought this could be due due a onChange event on some of them but even the ones that do not have events attached are having this same behaviour

This component has around 12 inputs and some other html components if that matters.

I sense this has to do with the dirty-checking but I don't really know if this is the case.

And here's the HTML and TS of the component I'm using

       <mat-form-field style="width:100%">
              <textarea
                matInput
                maxlength="4000"
                placeholder="Current Symptoms"
                [mention]="items"
                [mentionConfig]="{ triggerChar: '@', mentionSelect: onMentionSelect }"
                (opened)="getShortcuts(this.currentSymptomsRestriction)"
                name="symtoms"
                [(ngModel)]="examData.Exam.CURRENT_SYMPTOMS"
              ></textarea>
            </mat-form-field>




      <mat-form-field style="width:100%">
        <textarea
          matInput
          maxlength="4000"
          placeholder="Current History"
          name="currentHistory"
          [(ngModel)]="examData.Exam.CURRENT_HISTORY"
        ></textarea>
      </mat-form-field>

The TS related is:

import { Component, OnInit, OnDestroy, ChangeDetectorRef, ViewChild } from '@angular/core';
import {
  ExamData,
  ExamDrawColor,
  Exam,
  GensolveImage,
  PATIENT_ASSESSMENT,
  IExamData,
  ShortcutFilter
} from '@models/exam.models';
import { UtilService } from '@services/util.service';
import { environment } from '@environments/environment';
import { AdminType } from '@enums/system.enums';
import {
  ExamEnums,
  BodyDiagramType,
  PhysioProviderType,
  TextShortcutRestrictionType,
  ExamField
} from '@enums/exam.enums';
import { MatDialogRef } from '@angular/material/dialog';
import { MatTableDataSource } from '@angular/material/table';
import swal from 'sweetalert2';
import { StandardExam, SeverityOthers, IExamDynamic } from '@models/standard-exam';
import { PainDetailsComponent } from '../pain-details/pain-details.component';
import { TextShortcutComponent } from '../text-shortcut/text-shortcut.component';
import { SeverityOthersComponent } from '../severity-others/severity-others.component';
import { TextShortcut } from '@models/TextShortcut';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { InjuryTypeSelectorComponent } from '../injury-type-selector/injury-type-selector.component';
import { ShortcutsService } from '@services/shortcuts.service';
import { ExamService } from '@services/exam.service';

@Component({
  selector: 'subjective-exam',
  templateUrl: './subjective.component.html',
  styleUrls: ['./subjective.component.css']
})
export class SubjectiveComponent implements OnInit, IExamDynamic {
  public painDetails: PainDetailsComponent;
  public examData: StandardExam;

  public start_diagram: string;

  public sPainType: string = '';
  public sPainDescription: string = '';
  public subjective_diagram: string;
  public handednessOptions: Array<any>;
  public severityText: SeverityOthers;

  public bodyDiagram: GensolveImage;
  public bodyDiagramColors: Array<ExamDrawColor>;
  public bodyBackground: string;

  public bodyPartDiagram: GensolveImage;
  public bodyPartBackground: string;

  public dailyDiagram: GensolveImage;

  public shortcut: TextShortcut;
  public restrictions: Number[];
  public currentSymptomsRestriction: number;
  public mechanismRestriction: number;
  public factorRestriction: number;
  public items: string[] = [];

  public shortcuts: TextShortcut[];
  public ExamField = ExamField;

  public isUk: boolean;

  public bodyPartLabel: string;
  public bodyPartColors: Array<ExamDrawColor>;
  public disableForm: boolean;
  @ViewChild('injurySelector') injurySelector: InjuryTypeSelectorComponent;
  constructor(
    protected utilService: UtilService,
    protected cd: ChangeDetectorRef,
    protected shortcutsService: ShortcutsService,
    protected examService: ExamService
  ) {
    this.start_diagram = 'body';
    this.items = [' '];
  }

  ngOnInit() {
    this.examData = new StandardExam();
    this.loadHandednessOptions();
    this.loadRestrictions();
    this.severityText = { irritability: '', severity: '', nature: '', stage: '' };
    this.isUk = environment.phisyio_country === 'UK' ? true : false;
    this.disableExam();
  }

  public setExamData(examData: StandardExam) {
    this.examData = examData;
    this.sPainDescription = PainDetailsComponent.GetPainDetailsText(examData.Exam);
    this.severityText = SeverityOthersComponent.GetDescription(examData.Exam);
    this.sPainType = PainDetailsComponent.GetPainTypeText(examData.Exam);
    this.setDiagramInfo();
    this.cd.detectChanges();
    if (this.injurySelector != undefined) {
      this.injurySelector.setExamData(this.examData);
    }
    this.disableExam();
  }




  loadRestrictions() {
    this.currentSymptomsRestriction = TextShortcutRestrictionType.CurrentSymptoms;
    this.mechanismRestriction = TextShortcutRestrictionType.Mechanism;
    this.factorRestriction = TextShortcutRestrictionType.AggravatingFactors;
  }

  getShortcuts(fieldRestriction: number) {
    let filters = new ShortcutFilter();
    filters.INJURY_TYPE = this.examData.Exam.INJURY_TYPE;
    filters.SECONDARY_INJURY_TYPE = this.examData.Exam.SECONDARY_INJURY_TYPE;
    filters.INJURY_TYPE3 = this.examData.Exam.INJURY_TYPE3;
    filters.INJURY_TYPE4 = this.examData.Exam.INJURY_TYPE4;

    this.restrictions = this.shortcutsService.GetRestrictionsForExam(filters, fieldRestriction);
    this.items = [];
    let newItems = [];
    this.examService.GetTextShortcuts(this.restrictions).subscribe(response => {
      this.shortcuts = response as Array<TextShortcut>;
      this.shortcuts.forEach(shortcut => {
        newItems.push(shortcut.BUTTON_TEXT + ' - ' + shortcut.DISPLAY_TEXT);
      });
      this.items = this.items.concat(newItems);
    });
  }

  onMentionSelect(selection): string {
    return selection.label.substring(selection.label.indexOf('- ') + 2);
  }



 
}

question from:https://stackoverflow.com/questions/65831809/inputs-data-is-being-displayed-really-slow

Answer 1

Waitting for answers