آموزش ساخت جدول در Angular Material (انگولار متریال)

3 1,066

در این آموزش قصد داریم ساخت یک جدول با طراحی متریال در انگولار را به شما آموزش دهیم. در این آموزش از Angular 7 و Angular Material 7 استفاده می کنیم.

Angular Material یک کتابخانه محبوب است که برای طراحی کامپوننت های رابط کاربری مدرن از آن استفاده می شود. کامپوننت هایی که توسط این کتابخانه ساخته می شود قابلیت مستقل از پلتفرم را داشته و برای ساخت برنامه های تحت وب، موبایل ودسکتاپ می توان از آن استفاده کرد.

کامپوننت های Angular Material به ما کمک می کنند تا بتوانیم رابط کاربری و تجربه کاربری (UX)های جذاب و همچنین وب سایت ها و برنامه های تحت وب با رعایت اصول طراحی وب مدرن مانند قابلیت حمل و سازگاری با مرورگرهای مختلف ایجاد کنیم.

در پست امروز ما از کامپوننت جدول Angular Material استفاده خواهیم کرد.

سرفصل های این آموزش

  1. نصب انگولار 7
  2. نصب کتابخانه Angular Material
  3. ساخت یک ماژول متریال سفارشی
  4. وارد کردن (import) یک قالب پیش فرض و آیکن های متریال
  5. توضیحاتی پیرامون MatTableModule
  6. صفحه بندی کردن جدول انگولار
  7. مرتب سازی جدول

مقدمه

در قدم اول باید انگولار را نصب کنیم.

در این آموزش از Angular CLI 7 برای نصب انگولار استفاده می کنیم.

در حال حاضر انگولار 7 آخرین نسخه این فریمورک است. اگر تاکنون Angular CLI را نصب نکرده اید، با دستور زیر آن را نصب کنید. دستور زیر به طور خودکار Angular CLI 7 را نصب می کند، چون در حال حاضر آخرین نسخه، همین انگولار 7 است.

توجه: دوستان عزیزی که قصد دارند فریم ورک انگولار را از صفر تا صد یاد بگیرند کافیست در دوره ویدیویی زیر شرکت کنند:

1- نصب انگولار 7

دستور زیر را در ترمینال برای نصب انگولار 7 اجرا کنید.

در صورتی که از سیستم عامل مک استفاده می کنید، باید از دستور sudo برای گرفتن سطح دسترسی مدیر (Admin) استفاده کنید. اگر از ویندوز استفاده می کنید CMD را در حالت Administrator باز کنید.

با اجرای دستور بالا، انگولار به صورت سراسری در سیستم نصب می شود.

حال با دستور زیر یک پروژه جدید انگولار 7 در فولدر مورد نظرتان ایجاد کنید.

نصب انگولار ۷

2- نصب کتابخانه Angular Material

به فولدر پروژه رفته و با دستور زیر hammer.js را نصب کنید.

Hammer.js یک وابستگی اختیاری است و باعث می شود بتوانیم کامپوننت طراحی کنیم تا توسط سیستم لمسی موبایل قابل استفاده باشد.

حال با دستور زیر Angular Material و Angular Animation را نصب کنید.

حال باید hammer.js را در فایل angular.json وارد کنیم. فایل angular.json در روت پروژه انگولار قرار دارد.

3- ساخت ماژول متریال سفارشی

یک فایل با نام material.module.ts در فولدر src >> app ایجاد کنید. کدهای زیر را در فایل material.module.ts قرار دهید.

در اینجا ما فقط کامپوننت MatTableModule کتابخانه انگولار متریال را وارد (import) می کنیم.

4- وارد کردن (import) یک قالب پیش فرض و آیکن های متریال

در انگولار متریال چندین قالب پیش فرض وجود دارد. این تم ها یک سری رنگ و استایل های اولیه را به برنامه ما می دهند.

از تم های اصلی می توان به indigo-pink، deepPurple-amber، purple-green و purple-bluegrey اشاره کرد.

برای وارد کردن یک قالب به پروژه باید کد زیر را به فایل سراسری Style.css اضافه کنید.این فایل در پوشه src قرار دارد.

همچنین می توانید به آیکن های متریال هم دسترسی داشته باشید.

هر کدام از این آیکن ها توسط یک نام مشخص می شوند و باید همراه کامپوننت <mat-icon> استفاده شوند. برای وارد کردن تم به پروژه باید کد زیر را به بخش <head> فایل index.html که در روت پروژه قرار دارد اضافه کنید.

حال قدم آخر، وارد کردن (import) فایل material.module.ts و ماژول های دیگر انگولار متریال و فایل های BrowserAnimationModule به داخل فایل app.module.ts است .

5- توضیحاتی پیرامون MatTableModule

Mat-table یک جدول با طراحی متریال را به ما ارائه می کند و برای نمایش سطرهای یک جدول استفاده می شود.

این جدول بر اساس CDK data-table ساخته شده است و از اینترفیس های مشابه برای ورود اطلاعات و قالب بندی آن استفاده می کند، بجز اینکه برای تعریف عناصر آن از پیشوند –mat به جای –cdk استفاده می کند.

برای کسب اطلاع بیشتر درباره اینترفیس های این جدول و نحوه پیاده سازی آنها به اینجا مراجعه کنید.

در زیر یک مثال از مستندات اصلی انگولار متریال آورده ایم. برای شروع، کدهای زیر را در فایل app.component.ts بنویسید.

در اینجا ما اینترفیس PeriodicElement با چهار متغیر تعریف کردیم. این اینترفیس همانند یک مدل است که یک سری پروپرتی ها همراه با نوع داده مشخصی دارد.

سپس ما یک سری داده های نمونه تعریف کردیم و داخل کلاس AppComponent یک آرایه با نام displayColumns داریم که نام ستون های ما را در خود ذخیره می کند.

داخل فایل app.component.css کدهای css زیر را قرار دهید.

در نهایت کدهای زیر را در فایل app.component.html قرار دهید.

فایل را ذخیره کرده و با دستور زیر سرور توسعه را راه اندازی کنید.

ساخت جدول با طراحی متریال در انگولار

اگر تمام پیکربندی ها را درست انجام داده باشید، میتوانید جدول متریال را در صفحه اصلی برنامه (home)  ببینید.

6- صفحه بندی جدول انگولار

در ادامه می خواهیم به جدول ساخته شده، صفحه بندی اضافه کنیم. برای اینکار باید جدول را پیکربندی کنیم. برای اینکار ابتدا MatPaginatorModule را به فایل material.module.ts وارد (import) کنیم.

حال باید MatPaginator و MatTableDataSource را به فایل app.component.ts وارد (import) کنیم.

در بالا داده های یک آرایه استاتیک را به MatTableDataSorce ارسال کردیم، و سپس داده های آن را به آبجکت Paginator نسبت دادیم. با اینکار می توانیم بسته به شماره صفحه، داده های مربوطه را نمایش دهیم.

حال در انتها، عنصر Paginator را به فایل app.compnent.ts اضافه می کنیم.

فایل را ذخیره کرده و به آدرس http://localhost:4200 بروید.

صفحه بندی یک جدول در انگولار متریال

همانطور که می بینید پروپرتی pageSizeOption را به عنوان یک آرایه تعریف و خصیصه showFirstLastOption را هم به آن اضافه کردیم.

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

ابتدا باید MatSortModule را به فایل material.module.ts وارد (import) کنیم. کدهای زیر را در فایل material.module.ts اضافه کنید.

همچنین کدهای زیر را به فایل app.component.css اضافه کنید.

حال ماژول MatSort را به فایل app.component.ts وارد (import) کنید.

همانند آبجکت paginator، باید آبجکت sort را به data source متصل کنیم. برای اینکار باید یک سری پروپرتی هایی را به فایل app.component.html اضافه کنیم.

فایل را ذخیره کنید. به این ترتیب توانستیم صفحه بندی و مرتب سازی ستون ها را به جدول اضافه کنیم.

3 نظر
  1. علی ظریف

    تصحیح کامنت قبلی:
    متاسفانه از ورژن 8 انگولار به بعد اینطوری شده و باید آدرس دقیق متریال ها رو موقع ایمپورت کردن نوشت.من از انگولار 9 استفاده می کنم.
    دستورات بالا در ورژن های قدیمی تر درست کار می کنن.

  2. علی ظریف

    این دستورات غلطه و برنامه اجرا نمیشه:
    import { MatPaginator, MatTableDataSource } from ‘@angular/material’;
    import { MatPaginatorModule } from ‘@angular/material’;

    صحیحش به این شکله:
    import { MatPaginator } from ‘@angular/material/paginator’;
    import { MatTableDataSource } from ‘@angular/material/table’;
    import { MatPaginatorModule } from ‘@angular/material/paginator’;

  3. رامین صلحی

    دمت گرم مهندس عالیییی بود !
    لطف نحوه آپلود چندتایی عکس رو هم بزارید ممنون .

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

mezitli escort
mezitli escort
mezitli escort