Autocomplete

Einfaches Autocomplete

Im nächsten Beispiel wird ein einfaches Beispiel von einem Autocomplete Component gezeigt, ohne erweiterter Konfiguration.

Es werden einige Elemente benötigt, da dieses Component bereits einige an Funktionen mitbringt.

import { Component, OnInit } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { FormControl } from '@angular/forms';

import { MatAutocompleteModule } from '@angular/material/autocomplete';

import { Observable, map, startWith } from 'rxjs';

@Component({
    selector: 'app-autocomplete',
    imports: [
        AsyncPipe,
        MatAutocompleteModule
    ],
    templateUrl: './autocomplete.component.html',
    styleUrl: './autocomplete.component.scss'
})
export class AutocompleteComponent {

    fruitsFormControl = new FormControl('');
    fruitsItems: string[] = [
        'Apfel',
        'Banane',
        'Birne',
        'Kirsche',
        'Melone'
    ];

    filteredFruits!: Observable<string[]>;

    ngOnInit(): void {
        this.filteredFruits = this.fruitsFormControl.valueChanges.pipe(
            startWith(''),
            map(value => this._filterFruitsOptions(value || ''))
        );
    }

    /**
     * Filter fruits options
     * ---
     * @param value - Entered value
     */
    private _filterFruitsOptions(value: string): string[] {
        const filterValue = value.toLowerCase();
        return this.fruitItems.filter(fruit => fruits.toLowerCase().includes(filterValue));
    }

}

In diesem Beispiel wird das native Browser-Input-Element verwendet, ohne einer Integration von Angular Material. Lediglich das Autocomplete-Dropdown-Menü wird von Angular Material bereitgestellt. Das ist in den Fällen nützlich, wenn man eigene Stile oder Corporate Design anwenden möchte/muss.

<input
    type="text"
    [formControl]="fruitsFormControl"
    [matAutocomplete]="autoFruits"
>
<mat-autocomplete #autoFruits="matAutocomplete">
    @for (fruit of filteredFruits; track fruit) {
        <mat-option [value]="fruit">{{ fruit }}</mat-option>
    }
</mat-autocomplete>

Als Ergebnis würde man, je nach Browser, folgende Ausgabe erhalten (Hinweis: Die Elemente um das Input-Element sind einfach Bestandteile meiner App insgesamt und haben keine Auswirkung auf das gezeigte Component).

Wenn man allerdings in das Eingabefeld hinein klickt, geht das Angular Material Autocomplete Menü, mit all definierten Elementen (Früchten) auf.

Man kann nun mit dem Klick auf eine der Optionen, das gewünschte Element auswählen und die Auswahl steht dann im Eingabefeld.

Die wichtigsten Funktion ist die Autovervollständigung bei diesem Element. Und diese funktioniert auch bei einem einfachen, nativen Eingabefeld.

Einfaches Beispiel - Custom Input

Im nächsten Schritt werden wir mat-form-field aus dem MatInputModule einbinden und das Eingabefeld mit Angular Material Stilen ausgeben.