Angular 5 material design mat-car kit in absolute position without the use of formControl

I am trying to replace the custom suggestion menu that I built in the past with mat-autocomplete. Unfortunately, I cannot get it to work without clicking on it matInput. Here is what I have right now:

<div id="connection-editor" class="resizable"
     contenteditable="true">
</div>
<mat-form-field>
<input matInput type="text" placeholder="Add type..." aria-label="Number" [formControl]="atQuery" [matAutocomplete]="auto">
</mat-form-field>
<mat-autocomplete
    [style.position]="absolute"
    [style.left]="suggestX + 'px'"
    [style.top]="suggestY + 'px'" #auto="matAutocomplete">
  <mat-option *ngFor="let entry of entities" [value]="entry.name" (onSelectionChange)="onEntrySelect(entry)">
    {{ entry.name }}
  </mat-option>
</mat-autocomplete>

I update atQuerybased on interactions in contenteditable, and the object entitiesfills correctly.

this.atQuery.valueChanges
        .debounceTime(400)
        .subscribe(query => {
            this.connectionService.queryEntries(query).subscribe(text => {
                const suggestions: SuggestionJson[] = <SuggestionJson[]> JSON.parse(text).content;
                if (suggestions.length === 1) {
                    const suggestion: SuggestionJson = suggestions[0];
                    this.users = suggestion.users.map((e) => e.complex);
                    this.entities = suggestion.entities.map((e) => e.complex);
                    this.primitives = suggestion.primitives.filter((e) => !e.value).map((e) => {
                        const pr: PrimitiveEntryJson  = new PrimitiveEntryJson();
                        pr.value = e.value;
                        pr.type = e.type;
                        return pr;
                    });
                }
            });
        });

I had two variables suggestXand suggestYthat would put a menu of sentences under the text cursor.

Right now, the mat-autocompleteresults appear only when I click on the input that has [formControl]. I want to control when they appear so that it can work with absolute positioning.

mat-autocomplete ( ) formControl, ?

+4

Source: https://habr.com/ru/post/1690805/


All Articles