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

  • جمعه ۲۹ اسفند ۱۳۹۹
  • بازدید ۱۵۴ نفر

angular material 7 select 6367 تصویر

کنترل Select در انگولار متریال ۷

<mat-select> یک دستورالعمل انگولار است که به منظور ایجاد کنترل <select> با استایل متریال دیزاین استفاده می شود. در این بخش چگونگی استفاده از این دستورالعمل برای ایجاد کنترل select را بررسی خواهیم کرد.

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

در ادامه برنامه ای که در بخش ایجاد پروژه در انگولار ایجاد کرده بودیم را برای استفاده از کنترل <mat-select> تغییر می دهیم.

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

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

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

نتییجه

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

angular material 7 select 6367 1 تصویر

جزئیات

  • در ابتدا ما با استفاده از دستورالعمل mat-select یک کنترل select ایجاد کرده ایم.
  • سپس با استفاده از دستورالعمل mat-option و *ngFor گزینه های تعریف شده در کلاس کامپوننت را به آن اضافه کرده ایم.
ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

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