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

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

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

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

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

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

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

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

مرتب سازی جدول در انگولار متریال 7 – آموزش انگولار متریال

  • دوشنبه ۱۵ شهریور ۱۴۰۰
  • بازدید ۴۹۲ نفر

 تصویر angular-material-7-sort-header_6428 مرتب سازی جدول در انگولار متریال 7 – آموزش انگولار متریال

مرتب سازی جدول در انگولار متریال

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

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

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

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

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

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

نتیجه

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

تصویر angular-material-7-sort-header_6428_1 مرتب سازی جدول در انگولار متریال 7 – آموزش انگولار متریال

جزئیات

  • در مثال فوق ما یک جدول ایجاد و قابلیت مرتب سازی را با استفاده از دستورالعمل matSort به آن اضافه کرده ایم.
ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

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