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

دوشنبه ۱۵ شهریور ۱۴۰۰
بازدید ۵۹۷ نفر
آرتین
(10 امتیاز از 2 رای)
Loading...

تصویر angular-material-7-paginator_6426 Paginator در انگولار متریال 7 – آموزش انگولار متریال

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

یک دستورالعمل انگولار است که به منظور صفحه بندی مورد استفاده قرار می گیرد. در این بخش چگونگی استفاده از این دستورالعمل را با استفاده از یک مثال ساده بررسی خواهیم کرد.

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

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatPaginatorModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatPaginatorModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import {MatPaginatorModule} from '@angular/material'

import {FormsModule, ReactiveFormsModule} from '@angular/forms';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

BrowserAnimationsModule,

MatPaginatorModule,

FormsModule,

ReactiveFormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

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

<mat-paginator [length] = "100"
   [pageSize] = "10"
   [pageSizeOptions] = "[5, 10, 25, 100]"
   (page) = "pageEvent = $event">
</mat-paginator>
<div *ngIf = "pageEvent">
   <h5>Page Change Event</h5>
   <div>List length: {{pageEvent.length}}</div>
   <div>Page size: {{pageEvent.pageSize}}</div>
   <div>Page index: {{pageEvent.pageIndex}}</div>
</div>