/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

0 vote292 views1 answer
Html not showing image with full path
Html
11 votes295 views1 answer
Html ngfor with index
Html
1 vote329 views1 answer
Translate html Text in magento 2
Html
1 vote323 views1 answer
Href do nothing
Html
0 vote338 views1 answer
Site.baseurl page.image_path
Html
3 votes342 views2 answers
Font awesome reload icon
Html
0 vote295 views1 answer
How to check system is 32 or 64 linux
Html
0 vote331 views1 answer
Country select in bootstrap form
Html
0 vote352 views1 answer
Html how to move a image
Html
5 votes315 views1 answer
Multi-line comment xml
Html