Autocomplete Suffix

A single directive that adds a clear button and a dropdown-toggle button to the suffix of a Material autocomplete input. Apply autocompleteSuffix straight to the input element — no anchor directive or separate suffix component required.

Overview

Examples

AutocompleteSuffixDirective targets an input that carries both matAutocomplete and autocompleteSuffix. It injects the MatAutocompleteTrigger from the host input and renders two icon buttons into the field's suffix slot:

A clear button (close icon) that empties the input, resets the bound form control to null, marks it touched, closes the panel, and restores focus. It is hidden while the input is empty and appears once a value is present.
A dropdown-toggle button that opens or closes the autocomplete panel. Its icon flips between arrow_drop_down and arrow_drop_up to reflect the open state.

When the directive is applied to an input with an NgControl (for example formControlName), it tracks the control's value changes to keep the clear button's visibility in sync. On open, the currently selected option is scrolled into view. The directive works with both plain string options and object options paired with a displayWith function.

Because it wires directly into the Material trigger and the field's icon-suffix container, it composes with a standard mat-form-field and requires no extra markup beyond the attribute itself.

API

Selector

input[matAutocomplete][autocompleteSuffix]

The directive matches only when applied to an input that also has the matAutocomplete binding. It exposes no inputs or outputs — its behavior is driven entirely by the host input, its MatAutocompleteTrigger, and the associated form control.

Behavior

Element	Icon	Behavior
Clear button	`close`	Clears the input value, sets the bound control to `null`, marks it touched, closes the panel, and refocuses the input. Hidden while the field is empty.
Dropdown-toggle button	`arrow_drop_down` / `arrow_drop_up`	Opens or closes the autocomplete panel; the icon reflects the current open state.

Related components

Component	Selector	Description
`AutocompleteClearButtonComponent`	`autocomplete-clear-button`	Icon button emitting `clicked`; rendered by the directive to clear the value.
`AutocompleteDropdownButtonComponent`	`autocomplete-dropdown-button`	Icon button with an `expanded` signal and `clicked` output; toggles the panel.