/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

27 votes163 views5 answers
Class binding vue
Html
0 vote173 views1 answer
Bootsrap min css
Html
9 votes175 views3 answers
Solid black line css
Html
0 vote145 views1 answer
How do you write a basic html code?
Html
0 vote171 views2 answers
Drupal 8 HTML in type link
Html
9 votes183 views2 answers
Html make a clickable link
Html
12 votes175 views2 answers
<a href="tel:+91-999900670">9999000670</a>
Html
2 votes171 views1 answer
Bootstrap 5 select
Html
8 votes181 views2 answers
Generate random password with special characters javascrtip
Html
0 vote185 views2 answers
Password.text
Html