@angular/material/paginator#MatPaginatorIntl TypeScript Examples

The following examples show how to use @angular/material/paginator#MatPaginatorIntl. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: paginator.directive.spec.ts    From angular-custom-material-paginator with MIT License 6 votes vote down vote up 
function createComponent<T>(type: Type<T>, providers: Provider[] = []): ComponentFixture<T> {
  TestBed.configureTestingModule({
    imports: [MatPaginatorModule, NoopAnimationsModule],
    declarations: [type, PaginatorDirective],
    providers: [MatPaginatorIntl, ...providers]
  }).compileComponents();
  const fixture = TestBed.createComponent(type);
  fixture.detectChanges();
  return fixture;
}
Example #2
Source File: app.module.ts    From open-genes-frontend with Mozilla Public License 2.0 5 votes vote down vote up 
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    LanguageComponent,
    BurgerMenuComponent,
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(APP_ROUTES, ROUTER_OPTIONS),
    HttpClientModule,
    // ngx-translate and the loader module
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: httpLoaderFactory,
        deps: [HttpClient],
      },
    }),
    BrowserAnimationsModule,
    MaterialModule,
    IconModule,
    GoogleAnalyticsModule,
    DirectivesModule,
    TermHintModule,
    SnackBarModule,
    UiComponentsModule,
  ],
  providers: [
    TranslateService,
    { provide: LOCALE_ID, useValue: 'en' },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpReqInterceptor,
      multi: true,
    },
    { provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl },
  ],
  exports: [MaterialModule],
  bootstrap: [AppComponent],
})
export class AppModule {}
Example #3
Source File: custom-mat-paginator-int.ts    From open-genes-frontend with Mozilla Public License 2.0 5 votes vote down vote up 
@Injectable()
export class CustomMatPaginatorIntl extends MatPaginatorIntl implements OnDestroy {
  private unsubscribe$ = new Subject();
  private of_label = 'of';

  constructor(private translate: TranslateService) {
    super();
    this.translate.onLangChange
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe(() => {
        this.getAndInitTranslations();
      });

    this.getAndInitTranslations();
  }

  private getAndInitTranslations() {
    this.translate
      .get(['items_per_page', 'next_page', 'prev_page', 'of_label'])
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe((translation) => {
        this.itemsPerPageLabel = translation['items_per_page'];
        this.nextPageLabel = translation['next_page'];
        this.previousPageLabel = translation['prev_page'];
        this.of_label = translation['of_label'];
        this.changes.next();
      });
  }

  getRangeLabel = (page: number, pageSize: number, length: number) => {
    if (length === 0 || pageSize === 0) {
      return `0 ${this.of_label} ${length}`;
    }

    length = Math.max(length, 0);
    const startIndex = page * pageSize;
    const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;

    return `${startIndex + 1} - ${endIndex} ${this.of_label} ${length}`;
  };

  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
}