/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

1 vote144 views1 answer
Column ordering in bootstrap
Html
3 votes177 views1 answer
Color selector html
Html
6 votes183 views2 answers
Property 'on' does not exist on type 'HTMLElement'.
Html
34 votes184 views6 answers
Html a tag
Html
70 votes188 views6 answers
Html hyperlink
Html
1 vote264 views3 answers
Grepper gold
Html
0 vote186 views1 answer
Error pop writing html
Html
0 vote186 views3 answers
Smarty print html
Html
0 vote181 views1 answer
Readium github
Html
-1 vote224 views2 answers
Html inline label
Html