/Html/Multiple autocomplete material angular shows same dropdown

Multiple autocomplete material angular shows same dropdown

 <!-- change autocomplete name: matInput [matAutocomplete]="autoOrigen" -> [matAutocomplete]="autoDestino" -->
 <div id="ciudadOrigen" class="subcontainer">
              <mat-form-field>
                <mat-label>Ciudad origen</mat-label>
                <input type="text" matInput [matAutocomplete]="autoOrigen" placeholder="SELECCIONAR"
                       formControlName="ciudadorig">
                <mat-autocomplete #autoOrigen="matAutocomplete" [displayWith]="displayFnOrig">
                  <mat-option [value]="null">SELECCIONAR</mat-option>
                  <mat-option *ngFor="let ciudadorig of ciudadesFiltradasOrigen |async"
                              [value]="ciudadorig">
                    {{ciudadorig.descripcion}}
                  </mat-option>
                </mat-autocomplete>
                <button type="button" mat-button matSuffix mat-icon-button aria-label="Clear"
                        (click)="limpiarComponentePrincipal('ciudadorig')">
                  <mat-icon>close</mat-icon>
                </button>
              </mat-form-field>
            </div>
            <!--Ciudad destino -->
            <div id="ciudadDestino" class="subcontainer">
              <mat-form-field>
                <mat-label>Ciudad destino</mat-label>
                <input type="text" matInput [matAutocomplete]="autoDestino" placeholder="SELECCIONAR"
                       formControlName="ciudadDest">
                <mat-autocomplete #autoDestino="matAutocomplete" [displayWith]="displayFnOrig">
                  <mat-option [value]="null">SELECCIONAR</mat-option>
                  <mat-option *ngFor="let ciudadDest of ciudadesFiltradasDestino |async"
                              [value]="ciudadDest">
                    {{ciudadDest.descripcion}}
                  </mat-option>
                </mat-autocomplete>
                <button type="button" mat-button matSuffix mat-icon-button aria-label="Clear"
                        (click)="limpiarComponentePrincipal('ciudadDest')">
                  <mat-icon>close</mat-icon>
                </button>
              </mat-form-field>
            </div>

Multiple autocomplete material angular shows same dropdown

<!-- change name in [matAutocomplete]-->
<div id="ciudadOrigen" class="subcontainer">
              <mat-form-field>
                <mat-label>Ciudad origen</mat-label>
                <input type="text" matInput [matAutocomplete]="autoOrigen" placeholder="SELECCIONAR"
                       formControlName="ciudadorig">
                <mat-autocomplete #autoOrigen="matAutocomplete" [displayWith]="displayFnOrig">
                  <mat-option [value]="null">SELECCIONAR</mat-option>
                  <mat-option *ngFor="let ciudadorig of ciudadesFiltradasOrigen |async"
                              [value]="ciudadorig">
                    {{ciudadorig.descripcion}}
                  </mat-option>
                </mat-autocomplete>
                <button type="button" mat-button matSuffix mat-icon-button aria-label="Clear"
                        (click)="limpiarComponentePrincipal('ciudadorig')">
                  <mat-icon>close</mat-icon>
                </button>
              </mat-form-field>
            </div>
            <!--Ciudad destino -->
            <div id="ciudadDestino" class="subcontainer">
              <mat-form-field>
                <mat-label>Ciudad destino</mat-label>
                <input type="text" matInput [matAutocomplete]="autoDestino" placeholder="SELECCIONAR"
                       formControlName="ciudadDest">
                <mat-autocomplete #autoDestino="matAutocomplete" [displayWith]="displayFnOrig">
                  <mat-option [value]="null">SELECCIONAR</mat-option>
                  <mat-option *ngFor="let ciudadDest of ciudadesFiltradasDestino |async"
                              [value]="ciudadDest">
                    {{ciudadDest.descripcion}}
                  </mat-option>
                </mat-autocomplete>
                <button type="button" mat-button matSuffix mat-icon-button aria-label="Clear"
                        (click)="limpiarComponentePrincipal('ciudadDest')">
                  <mat-icon>close</mat-icon>
                </button>
              </mat-form-field>
            </div>

Similar codes

14 votes170 views2 answers
How to display entered text when a button is clicked in html
Html
1 vote219 views1 answer
Chrome remove autocomplete highlight
Html
0 vote208 views1 answer
Use html code for close icon after zoom imgage
Html
8 votes168 views1 answer
How do i set a pdf to be download link in html
Html
22 votes176 views1 answer
Input type that allows float number
Html
4 votes172 views3 answers
How to show a circular image in html
Html
0 vote175 views1 answer
Html compressor
Html
0 vote166 views1 answer
How to create a quiz in p5
Html
3 votes217 views3 answers
Responsive text css
Html
2 votes125 views2 answers
Select change event
Html