A hint under an email field that completes your domain and fixes typos.
import { TxEmailSuggestion } from '@tectra-ng/ui/email-suggestion';
Type a name or @gmial.com; a click on the hint fills the field.
@gmial.com
<tx-field [label]="'Work email'"> <input txInput type="email" autocomplete="off" [formControl]="email" /></tx-field><tx-email-suggestion [value]="typed()" [domain]="'example.com'" (applied)="email.setValue($event)"/>
Without your own domain only typos in common providers are caught; knownDomains sets your own list.
knownDomains
taras@gmial.com
iryna@outlok.com
sofia@example.cmo
<div class="stack"> @for (sample of samples; track sample) { <div class="row"> <code>{{ sample }}</code> <tx-email-suggestion [value]="sample" [knownDomains]="known" (applied)="picked.set($event)" /> </div> } <span class="hint">Picked: {{ picked() || '—' }}</span></div>