multiple autocomplete material angular shows same dropdown

Solutions on MaxInterview for multiple autocomplete material angular shows same dropdown by the best coders in the world

showing results for - "multiple autocomplete material angular shows same dropdown"
Khadija
07 Jun 2019
1<!-- change name in [matAutocomplete]-->
2<div id="ciudadOrigen" class="subcontainer">
3              <mat-form-field>
4                <mat-label>Ciudad origen</mat-label>
5                <input type="text" matInput [matAutocomplete]="autoOrigen" placeholder="SELECCIONAR"
6                       formControlName="ciudadorig">
7                <mat-autocomplete #autoOrigen="matAutocomplete" [displayWith]="displayFnOrig">
8                  <mat-option [value]="null">SELECCIONAR</mat-option>
9                  <mat-option *ngFor="let ciudadorig of ciudadesFiltradasOrigen |async"
10                              [value]="ciudadorig">
11                    {{ciudadorig.descripcion}}
12                  </mat-option>
13                </mat-autocomplete>
14                <button type="button" mat-button matSuffix mat-icon-button aria-label="Clear"
15                        (click)="limpiarComponentePrincipal('ciudadorig')">
16                  <mat-icon>close</mat-icon>
17                </button>
18              </mat-form-field>
19            </div>
20            <!--Ciudad destino -->
21            <div id="ciudadDestino" class="subcontainer">
22              <mat-form-field>
23                <mat-label>Ciudad destino</mat-label>
24                <input type="text" matInput [matAutocomplete]="autoDestino" placeholder="SELECCIONAR"
25                       formControlName="ciudadDest">
26                <mat-autocomplete #autoDestino="matAutocomplete" [displayWith]="displayFnOrig">
27                  <mat-option [value]="null">SELECCIONAR</mat-option>
28                  <mat-option *ngFor="let ciudadDest of ciudadesFiltradasDestino |async"
29                              [value]="ciudadDest">
30                    {{ciudadDest.descripcion}}
31                  </mat-option>
32                </mat-autocomplete>
33                <button type="button" mat-button matSuffix mat-icon-button aria-label="Clear"
34                        (click)="limpiarComponentePrincipal('ciudadDest')">
35                  <mat-icon>close</mat-icon>
36                </button>
37              </mat-form-field>
38            </div>
Angela
09 Jul 2020
1 <!-- change autocomplete name: matInput [matAutocomplete]="autoOrigen" -> [matAutocomplete]="autoDestino" -->
2 <div id="ciudadOrigen" class="subcontainer">
3              <mat-form-field>
4                <mat-label>Ciudad origen</mat-label>
5                <input type="text" matInput [matAutocomplete]="autoOrigen" placeholder="SELECCIONAR"
6                       formControlName="ciudadorig">
7                <mat-autocomplete #autoOrigen="matAutocomplete" [displayWith]="displayFnOrig">
8                  <mat-option [value]="null">SELECCIONAR</mat-option>
9                  <mat-option *ngFor="let ciudadorig of ciudadesFiltradasOrigen |async"
10                              [value]="ciudadorig">
11                    {{ciudadorig.descripcion}}
12                  </mat-option>
13                </mat-autocomplete>
14                <button type="button" mat-button matSuffix mat-icon-button aria-label="Clear"
15                        (click)="limpiarComponentePrincipal('ciudadorig')">
16                  <mat-icon>close</mat-icon>
17                </button>
18              </mat-form-field>
19            </div>
20            <!--Ciudad destino -->
21            <div id="ciudadDestino" class="subcontainer">
22              <mat-form-field>
23                <mat-label>Ciudad destino</mat-label>
24                <input type="text" matInput [matAutocomplete]="autoDestino" placeholder="SELECCIONAR"
25                       formControlName="ciudadDest">
26                <mat-autocomplete #autoDestino="matAutocomplete" [displayWith]="displayFnOrig">
27                  <mat-option [value]="null">SELECCIONAR</mat-option>
28                  <mat-option *ngFor="let ciudadDest of ciudadesFiltradasDestino |async"
29                              [value]="ciudadDest">
30                    {{ciudadDest.descripcion}}
31                  </mat-option>
32                </mat-autocomplete>
33                <button type="button" mat-button matSuffix mat-icon-button aria-label="Clear"
34                        (click)="limpiarComponentePrincipal('ciudadDest')">
35                  <mat-icon>close</mat-icon>
36                </button>
37              </mat-form-field>
38            </div>
similar questions