There is no directive "exportAs" set to "matAutocompleteOrigin"

Question

I'm using Angular Material 6.4.7 and I've some trouble with Mat-Autocomplete. I insert the autocomplete inside the MatDialog and the dropdown of the autocomplete is hidden by the dialog. I know that I can set the z-index to high values, but it's not a real fix, so I tried to use the directive #origin="matAutocompleteOrigin" and [matAutocompleteConnectedTo]="origin". As the title, it gave me the error "There is no directive "exportAs" set to matAutocompleteOrigin". My package.json:

"@angular/animations": "^6.1.8",
"@angular/cdk": "^6.4.7",
"@angular/common": "^6.1.8",
"@angular/compiler": "^6.1.8",
"@angular/core": "^6.1.8",
"@angular/forms": "^6.1.8",
"@angular/http": "^6.1.8",
"@angular/material": "^6.4.7",
"@angular/platform-browser": "^6.1.8",
"@angular/platform-browser-dynamic": "^6.1.8"

My html:

<div #origin="matAutocompleteOrigin">
    <form>
        <mat-form-field>
            <input matInput type="text" placeholder="Search icon..." [matAutocomplete]="auto" [formControl]="iconCtrl"
             [matAutocompleteConnectedTo]="origin">
            <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let li of filteredIcons | async" [value]="li" (onSelectionChange)="onSelectIcon($event)">
                    <i [ngClass]="['selected-icon-class', li]"><span class="icon-text"> {{li}} </span></i>
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>
    </form>
</div>

Any suggestion?

Answer 1

You left out the matAutocompleteOrigin directive on your DIV:

<div matAutocompleteOrigin #origin="matAutocompleteOrigin">

The 'exportAs matAutocompleteOrigin' belongs to that directive, so without it the #origin="matAutocompleteOrigin" fails.