کنترل Auto-Complete در انگولار متریال 7
ایجاد برنامه انگولار
در ادامه برنامه ای که در بخش ایجاد پروژه در انگولار 7 ایجاد کرده بودیم را برای استفاده از کنترل autocomplete تغییر می دهیم.
محتوای فایل app.module.ts را مانند نمونه زیر تغییر دهید:
محتوای فایل app.component.html:
محتوای فایل app.component.css:
کد زیر مربوط به فایل ویرایش شده app.component.ts است:
نتیجه
بعد از اجرا برنامه خروجی زیر را مشاهده خواهید کرد:
جزئیات
- در ابتدا ما یک فیلد ورودی ایجاد و یک autocomplete با نام auto را با استفاده از خاصیت [matAutocomplete] به آن بایند کردیم.
- سپس یک کنترل autocomplete با استفاده از تگ mat-autocomplete ایجاد کرده ایم.
- و با استفاده از *ngFor گزینه های مورد نظر را ایجاد کردیم.
هیچ نظری ثبت نشده است