Общий модуль автозаполнения Angular Material

Я использую ввод автозаполнения углового материала в нескольких компонентах, и он всегда выглядит одинаково:

form.component.html

<mat-form-field>
    <mat-label>Name</mat-label>
    <input matInput aria-label = "Name" [matAutocomplete] = "auto" [formControl] = "nameCtrl" type = "text">
    <mat-autocomplete #auto = "matAutocomplete">
        <mat-option *ngFor = "let name of filteredNames | async" [value] = "name.adlogin">
            <span>{{ name.displayname }}</span>
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

form.component.ts

export class FormComponent {

    nameCtrl: new FormControl();
    filteredNames: Observable<any[]>;
    nameList: any = [];

    constructor() {
        this.filteredNames = this.nameCtrl.valueChanges
        .pipe(
            startWith(''),
            map(name => name ? this.filterStates(name) : this.nameList.slice())
        );
    }

    filterStates(name: string) {
        return this.nameList.filter(name => {
            const searchStr = name.displayname.toLowerCase();
            return searchStr.indexOf(name.toLowerCase()) !== -1;
        });
    }

}

Что мне делать, чтобы создать общий модуль, который я могу импортировать, если он нужен в компоненте?