Angular Material Pagination Not Showing but is working

Question

im using the material Pagination i have imported module i put th material-pagination's tag inside the table and i notice that if i change the pageSizeOptions inside the tag the number of element displayed change but the paginator itself is not showing at all i have alredy tried to set the paginator to static, use a setter function to it in ngOnInit and AfterInit, try to get the size of data that i retrive using a service but not work

Table.components.html

<table mat-table [dataSource]="dataSource" matSort #table>

    <ng-container matColumnDef="n_conto">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> N conto </th>
        <td mat-cell *matCellDef="let row"> {{row.n_conto}} </td>
      </ng-container>

    <!-- ID Column -->
    <ng-container matColumnDef="data">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Data Operazione </th>
      <td mat-cell *matCellDef="let row"> {{row.data}} </td>
    </ng-container>

    <!-- Progress Column -->
    <ng-container matColumnDef="tipo">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Tipo Operazione </th>
      <td mat-cell *matCellDef="let row" > {{row.tipo}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="dettagli">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Dettagli </th>
      <td mat-cell *matCellDef="let row">
          {{row.dettagli}}
        </td>
    </ng-container>

    <ng-container matColumnDef="totale">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Totale </th>
        <td mat-cell *matCellDef="let row" [ngStyle]="(row.tipo==='Prelievo')?{'color':'red'}:{'color':'green'}">
            {{((row.tipo==='Prelievo')?'-':'+')+row.totale}}
          </td>
      </ng-container>


    <tr mat-header-row *matHeaderRowDef="table1h"></tr>
    <tr mat-row *matRowDef="let row; columns: table1h;"></tr>
    <mat-paginator [length]="len"  [pageSizeOptions]="[5,10,20]"></mat-paginator>

    
  </table>

Table.component.ts

import { AfterViewChecked, AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { AuthenticationService } from 'src/app/Services/authentication.service';
import { Conto, Movimento } from 'src/app/Services/models/conto';
import { UserService } from 'src/app/Services/user.service';

@Component({
  selector: 'app-lista-movimenti',
  templateUrl: './lista-movimenti.component.html',
  styleUrls: ['./lista-movimenti.component.css']
})
export class ListaMovimentiComponent implements AfterViewInit {
  table1h: string[] = ['n_conto','data', 'tipo', 'dettagli','totale'];
  dataSource!:MatTableDataSource<Movimento>;
  public len:number=0

  @ViewChild(MatPaginator) paginator!:MatPaginator
  @ViewChild(MatSort) sort!: MatSort;

  constructor(private auth:AuthenticationService,private user:UserService) { 
  
    this.refresh()

  }

  refresh(){
    console.log('Movimento')
    let data1:Movimento[]=[]
    this.len=0
    this.user.GetConti(this.auth.utente.codice_fiscale).subscribe({
      
      next:data=>{
        data.forEach((e,i)=>{
          this.len++;
          e.Movimenti.forEach(el=>{
            el.n_conto=e.n_conto
            data1.push(el)
          })
        })
        this.dataSource=new MatTableDataSource<Movimento>(data1)
        this.dataSource.paginator=this.paginator
        this.dataSource.sort=this.sort
      }
    })
  }

  ngOnInit(): void {
  }

  ngAfterViewInit(){
  }

}

module.module.ts

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

import { NavBarComponent } from './nav-bar/nav-bar.component';
import { routing } from './cliente-routing.module';
import { MaterialModule } from '../Utils/material/material.module';
import { ClienteComponent } from './cliente.component';
import { ListaContiComponent } from './lista-conti/lista-conti.component';
import { ProfileComponent } from './profile/profile.component';
import { HomeComponent } from './home/home.component';
import { PinComponent } from './dialogs/pin/pin.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ContoComponent } from './conto/conto.component';
import { Router, RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { ListaContiComponent as lt } from './home/lista-conti/lista-conti.component';
import { TabAzioniComponent } from './home/tab-azioni/tab-azioni.component';
import { ListaMovimentiComponent } from './home/lista-movimenti/lista-movimenti.component';
import { ConfirmComponent } from './dialogs/confirm/confirm.component';
import { PrelevaComponent } from './dialogs/preleva/preleva.component';
import { DepositaComponent } from './dialogs/deposita/deposita.component';


@NgModule({
  declarations: [
    ClienteComponent,
    NavBarComponent,
    ListaContiComponent,
    lt,
    ProfileComponent,
    HomeComponent,
    PinComponent,
    ContoComponent,
    TabAzioniComponent,
    ListaMovimentiComponent,
    ConfirmComponent,
    PrelevaComponent,
    DepositaComponent
  ],
  imports: [

    CommonModule,

    routing,
    MaterialModule,
    FormsModule,
    ReactiveFormsModule
  ]

})
export class ClienteModule { }

MaterialModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// Material Form Controls
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
// Material Navigation
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
// Material Layout
import { MatCardModule } from '@angular/material/card';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatListModule } from '@angular/material/list';
import { MatStepperModule } from '@angular/material/stepper';
import { MatTabsModule } from '@angular/material/tabs';
import { MatTreeModule } from '@angular/material/tree';
// Material Buttons & Indicators
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatBadgeModule } from '@angular/material/badge';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatRippleModule } from '@angular/material/core';
// Material Popups & Modals
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatDialogModule } from '@angular/material/dialog';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
// Material Data tables
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatAutocompleteModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatInputModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatCardModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatListModule,
    MatStepperModule,
    MatTabsModule,
    MatTreeModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatBadgeModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatRippleModule,
    MatBottomSheetModule,
    MatDialogModule,
    MatSnackBarModule,
    MatTooltipModule,
    MatPaginatorModule,
    MatSortModule,
    MatTableModule, 
  ],
  exports: [
    MatAutocompleteModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatInputModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatCardModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatListModule,
    MatStepperModule,
    MatTabsModule,
    MatTreeModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatBadgeModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatRippleModule,
    MatBottomSheetModule,
    MatDialogModule,
    MatSnackBarModule,
    MatTooltipModule,
    MatPaginatorModule,
    MatSortModule,
    MatTableModule 
  ]
})
export class MaterialModule { }

that the paginator displyng on the screen and not works only

score 2 · Answer 1 · answered Mar 26 '22 at 14:30

i resolve by puttting the table inside a div with "mat-elevation-z8" class and than i put the paginator inside that div but outside the table

<div class="mat-elevation-z8">

  <table mat-table [dataSource]="dataSource" matSort >

      <ng-container matColumnDef="n_conto">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> N conto </th>
          <td mat-cell *matCellDef="let row"> {{row.n_conto}} </td>
      </ng-container>

      <ng-container matColumnDef="data">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Data Operazione </th>
        <td mat-cell *matCellDef="let row"> {{row.data}} </td>
      </ng-container>

      <ng-container matColumnDef="tipo">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Tipo Operazione </th>
        <td mat-cell *matCellDef="let row" > {{row.tipo}} </td>
      </ng-container>

      <ng-container matColumnDef="dettagli">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Dettagli </th>
        <td mat-cell *matCellDef="let row">
            {{row.dettagli}}
          </td>
      </ng-container>

      <ng-container matColumnDef="totale">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Totale </th>
          <td mat-cell *matCellDef="let row" [ngStyle]="(row.tipo==='Prelievo')?{'color':'red'}:{'color':'green'}">
              {{((row.tipo==='Prelievo')?'-':'+')+row.totale}}
            </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="table1h"></tr>
      <tr mat-row *matRowDef="let row; columns: table1h;"></tr>

  </table>

  <mat-paginator [length]="dataSource.data.length" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page"></mat-paginator>

</div>

THANK YOU! I had this working in another project but didn't see the mistake I made in the new project. You just saved me at least an hour :) — , Feb 28 '23 at 20:33

Angular Material Pagination Not Showing but is working

1 Answers1