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

  • چهارشنبه 11 سپتامبر 2019
  • بازدید ۵۰۱ نفر

angular material 7 checkbox 6327 تصویر

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

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

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

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

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

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

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

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

نتیجه

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

angular material 7 checkbox 6327 1 تصویر

جزئیات

  • ما ابتدا با استفاده از mat-checkbox چند کنترل checkbox ایجاد و سپس با استفاده از ngModel مقدار آن ها را به متغیرهای تعریف شده در کامپوننت بایند کرده ایم.
  • سپس یک کنترل checkbox دیگر ایجاد و مقدار متغیرهای موجود در فایل .ts را به آن بایند کردیم.
ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

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