/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

3 votes118 views1 answer
Link for fontawesome
Html
0 vote104 views1 answer
How to declare a div
Html
3 votes123 views2 answers
Cache control html
Html
0 vote124 views3 answers
Html modal
Html
0 vote113 views1 answer
Emmet abbr
Html
0 vote123 views1 answer
Tailwind cdn v3
Html
0 vote115 views1 answer
Can html be coded in to text string
Html
-1 vote109 views1 answer
Div class wrapper html
Html
0 vote111 views1 answer
Can't bind to 'fill' since it isn't a known property of ':svg:path'
Html
0 vote110 views1 answer
Python download html as string
Html