Make mat-autocomplete of input visible on button click(angular)

Question

I'm trying to activate the mat-autocomplete panel of input visible when we click on the button.

<div class="filter">
    <button  mat-raised-button color="warn" (click)="showFilter()" >Add Filter</button>
    <div [class.open]="isOpen" class="filter-menu">
        <mat-form-field appearance="fill">
            <input type="text" matInput [matAutocomplete]="auto" >
            <mat-autocomplete #auto="matAutocomplete" >
                <mat-option *ngFor="let filter of filter" [value]="filter.filterName" (click)="filterFunc(filter.filterName)">
                  {{filter.filterName}}
                </mat-option>
              </mat-autocomplete>
        </mat-form-field>
    </div>
</div>

Joosep Parts · Accepted Answer · 2022-03-25 07:08:27Z

1

Use *ngIf to show or not show it?

@Component({
  selector: 'autocomplete-overview-example',
  templateUrl: 'autocomplete-overview-example.html',
  styleUrls: ['autocomplete-overview-example.css'],
})
export class AutocompleteOverviewExample {
  filter: any[] = [
    { filterName: 'test' },
    { filterName: 'other filter' },
    { filterName: 'third filter' },
  ];
  isOpen: boolean = false;

  showFilter() {
    this.isOpen = !this.isOpen;
  }

  filterFunc(value: string) {
    console.log('do something ', value);
  }
}

<div class="filter">
<button  mat-raised-button color="warn" (click)="showFilter()" >Add Filter</button>
<div *ngIf="isOpen" class="filter-menu">
    <mat-form-field appearance="fill">
        <input type="text" matInput [matAutocomplete]="auto" >
        <mat-autocomplete #auto="matAutocomplete" >
            <mat-option *ngFor="let filter of filter" [value]="filter.filterName" (click)="filterFunc(filter.filterName)">
              {{filter.filterName}}
            </mat-option>
          </mat-autocomplete>
    </mat-form-field>
</div>
</div>

Working example: https://stackblitz.com/edit/angular-material-autocomplete-of9a4k?file=app%2Fautocomplete-overview-example.html

edited Mar 25, 2022 at 7:08

answered Mar 25, 2022 at 4:21

Joosep Parts

6,3452 gold badges13 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Muneeb khurshid Over a year ago

the issue we auto-complete gets visible only when input is active which happens only when the page is loaded. when we click the button the input gets visible but is not activated which makes auto-complete hidden. I need something which on button click display input and auto-complete panel open together without addition click on input to activate

Joosep Parts Over a year ago

Please have a look at this. I copied your code over, seems to work for me. stackblitz.com/edit/…

Muneeb khurshid Over a year ago

yeah input gets loaded onclick but autocomplete panel gets visible after we click on input. i want autocomplete panel visible without clicking on the input

Joosep Parts Over a year ago

In the original question you asked for the opposite? Then take <mat-form-field> out of the <div *ngIf> and raise it one level higher into the parenting div?

Muneeb khurshid Over a year ago

autocomplete panel still does not open automatically when input becomes visible

Collectives™ on Stack Overflow

Make mat-autocomplete of input visible on button click(angular)

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related