آموزش انگولار متریال

مباحث پایه انگولار متریال

Form Controls در انگولار متریال

Navigation در انگولار متریال

Layout در انگولار متریال

Buttons - Indicators در انگولار متریال

Popups - Modals در انگولار متریال

Data Table در انگولار متریال

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

  • چهارشنبه ۲۰ شهریور ۱۳۹۸
  • بازدید ۱,۲۲۳ نفر

تصویر angular-material-7-checkbox_6327 کنترل CheckBox در انگولار متریال 7 - آموزش انگولار متریال

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

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

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

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

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

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

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

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

نتیجه

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

تصویر angular-material-7-checkbox_6327_1 کنترل CheckBox در انگولار متریال 7 - آموزش انگولار متریال

جزئیات

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

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