mat-autocomplete inside an ng-template

Question

I have a component that should choose beetween two mat-autocomplete depending an input value.

Both mat-autocomplete works without the ngIf, but when include it they stop working, I see "[object Object]" and it crashes when clicking:

Error: Attempting to open an undefined instance of `mat-autocomplete`. Make sure that the id passed to the `matAutocomplete` is correct and that you're attempting to open it after the ngAfterContentInit hook.


<div *ngIf="grouped;then grouped else notGrouped">
</div>
<ng-template #grouped>
   <mat-autocomplete  #auto="matAutocomplete" [displayWith]="inputDisplay" >
      <mat-optgroup *ngFor="let group of groupedItems" [label]="group.searchString">
        <mat-option *ngFor="let item of group.items" [value]="item">
          {{ item.search }}
        </mat-option>
     </mat-optgroup>
  </mat-autocomplete>
</ng-template> 
<ng-template #notGrouped> 
   <mat-autocomplete *ngIf="!grouped" #auto2="matAutocomplete" [displayWith]="inputDisplay">
      <mat-option *ngFor="let item of filteredItems" [value]="item">
            {{ item.search }}
       </mat-option>
   </mat-autocomplete>
</ng-template>

Is it not possible to include mat-autocomplete in an ngIf?

*[object Object]* means its taking object instead of boolean. check with ngIf value weather it is object or value. — Saisiva A, Jan 27 '20 at 09:52

score 2 · Answer 1 · answered Jan 27 '20 at 09:48

     This is working, Please try this

   <mat-autocomplete #auto="matAutocomplete"  autoActiveFirstOption="true"  [displayWith]="displayFn" (optionSelected)="autocompleteSelected($event)" >

      <ng-container *ngIf="lookupType=='multi'">
                <mat-optgroup class="lookup-matoptgroup" *ngFor="let group of lookupResult" [label]="group.group">


                    <mat-option class= "lookup-matoption" *ngFor="let item of group.content">

                        <span >
                        {{ item.name }}
                        </span>
                    </mat-option>

                </mat-optgroup>
            </ng-container>

            <ng-container *ngIf="lookupType=='single'">
                <mat-option *ngFor="let item of lookupResult" [value]="item">

                    <span>
                      {{ item.name }}
                    </span>
                </mat-option>  
            </ng-container>     
   </mat-autocomplete>

score -1 · Answer 2 · answered Mar 07 '19 at 19:43

Try it like this:

<div *ngIf="grouped; else notGrouped">
 <mat-autocomplete  #auto="matAutocomplete" [displayWith]="inputDisplay" >
  <mat-optgroup *ngFor="let group of groupedItems" [label]="group.searchString">
    <mat-option *ngFor="let item of group.items" [value]="item">
      {{ item.search }}
    </mat-option>
  </mat-optgroup>
 </mat-autocomplete>
</div>
<ng-template #notGrouped> 
 <mat-autocomplete #auto2="matAutocomplete" 
   [displayWith]="inputDisplay">
  <mat-option *ngFor="let item of filteredItems" [value]="item">
        {{ item.search }}
   </mat-option>
 </mat-autocomplete>
</ng-template>

mat-autocomplete inside an ng-template

2 Answers2