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

angular material 7 radio button 6362 تصویر

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

<mat-radiobutton> یک دستورالعمل انگولار است و همانطور از اسم آن نیز مشخص است به منظور ایجاد دکمه های رادیویی استفاده می شود (دکمه هایی به شکل <input type=”radio”>).

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

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

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

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

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

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

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

نتییجه

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

angular material 7 radio button 6362 1 تصویر

جزئیات

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

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