Read angular material autocomplete position for more information.

The autocomplete is a normal text input enhanced by a panel of suggested options.

Start by adding a regular matInput to your template. Let’s assume you’re using the formControl directive from ReactiveFormsModule to track the value of the input.

Note: It is possible to use template-driven forms instead, if you prefer. We use reactive forms in this example because it makes subscribing to changes in the input’s value easy. For this example, be sure to import ReactiveFormsModule from @angular/forms into your NgModule. If you are unfamiliar with using reactive forms, you can read more about the subject in the Angular documentation.

angular material autocomplete position

 

Add a search with autocomplete to your website

 

my-comp.html

<mat-form-field>
  <input type="text" matInput [formControl]="myControl">
</mat-form-field>

Next, create the autocomplete panel and the options displayed inside it. Each option should be defined by a mat-option tag. Set each option’s value property to whatever you’d like the value of the text input to be upon that option’s selection.

my-comp.html

<mat-autocomplete>
  <mat-option *ngFor="let option of options" [value]="option">
    {{ option }}
  </mat-option>
</mat-autocomplete>

Now we’ll need to link the text input to its panel. We can do this by exporting the autocomplete panel instance into a local template variable (here we called it “auto”), and binding that variable to the input’s matAutocomplete property.

my-comp.html

<mat-form-field>
  <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
</mat-form-field>

<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
</mat-autocomplete>

Searches related to angular material autocomplete position

You may also like

Halloween sale is live! 0 Days 19 Hours 31 Minutes 6 Seconds left to get your free search!
Sign up