کنترل Auto-Complete متریال در انگولار ۷ – آموزش انگولار متریال

  • دوشنبه ۱۸ شهریور ۱۳۹۸
  • بازدید ۳۷ نفر

angular material 7 auto complete 6325 تصویر

کنترل Auto-Complete متریال در انگولار ۷

<mat-autocomplete> یک دستورالعمل انگولار است که برای ایجاد ورودی متن به همراه یک لیست برای پر کردن ورودی استفاده می شود. برای مثال هنگامی در بخش جستجوی سایت گوگل یک عبارت را تایپ می کنید، خود گوگل بر اساس متن تایپ شده چند مورد را برای جستجو به شما پیشنهاد می دهد. از <mat-autocomplete> می توان برای ایجاد بخش جستجو استفاده کرد. در این بخش ما نحوه ایجاد و استفاده از کنترل autocomplete را در متریال دیزاین بررسی خواهیم کرد.

ایجاد برنامه انگولار

در ادامه برنامه ای که در بخش ایجاد پروژه در انگولار ۷ ایجاد کرده بودیم را برای استفاده از کنترل autocomplete تغییر می دهیم.

محتوای فایل app.module.ts را مانند نمونه زیر تغییر دهید:

محتوای فایل app.component.html:

محتوای فایل app.component.css:

کد زیر مربوط به فایل ویرایش شده app.component.ts است:

نتیجه

بعد از اجرا برنامه خروجی زیر را مشاهده خواهید کرد:

angular material 7 auto complete 6325 1 تصویر

جزئیات

  • در ابتدا ما یک فیلد ورودی ایجاد و یک autocomplete با نام auto را با استفاده از خاصیت [matAutocomplete] به آن بایند کردیم.
  • سپس یک کنترل autocomplete با استفاده از تگ mat-autocomplete ایجاد کرده ایم.
  • و با استفاده از *ngFor گزینه های مورد نظر را ایجاد کردیم.
ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است