title: Mat Paginator didn't show
body: <p>Hi I am using angular to display a tabulate page, in this page i will display 100 records and implement pagination on the records
  I used the example showing in the official documents, but didn't work. I am struggling for a while, so I am wondering if I can get help here:
  here is the component I created for the page.
  In the html page:</p>
  
  <pre><code>&lt;div id="main-body"&gt;
    &lt;div class="search-bar"&gt;
      &lt;div class="input-group mb-3"&gt;
        &lt;select [(ngModel)]="searchBy" class="border-primary"&gt;
            &lt;option value=""&gt;-- choose an option--&lt;/option&gt;
            &lt;option value="id"&gt; ID&lt;/option&gt;
            &lt;!-- &lt;option value="anchorPoint"&gt;Anchor Point&lt;/option&gt; --&gt;
            &lt;option *ngFor="let label of homeLabelList"  value="anchorPoint"&gt;{{label | uppercase}}&lt;/option&gt;
        &lt;/select&gt;
        &lt;input type="text" class="form-control card border-primary ele fnt" placeholder="Enter the SIR ID or Host or sha256 or User ID"
          aria-label="Ticket Id" aria-describedby="button-addon2" [(ngModel)]="currentTicketId"&gt;
        &lt;div class="input-group-append"&gt;
          &lt;button class="btn btn-primary ele" type="button" id="button-addon2" (click)="searchTicket()"&gt;Lets
            Search!&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="dates filter-tab"&gt;
          &lt;form [formGroup]="filterAllForm" (ngSubmit)="filterAllTicket()" class="table-list"&gt;
            &lt;mat-form-field class="filter-box"&gt;
              &lt;input matInput [matDatepicker]="startDate" placeholder="Choose a start date" formControlName="startDate" /&gt;
              &lt;mat-datepicker-toggle matSuffix [for]="startDate"&gt;&lt;/mat-datepicker-toggle&gt;
              &lt;mat-datepicker #startDate&gt;&lt;/mat-datepicker&gt;
            &lt;/mat-form-field&gt;
  
            &lt;mat-form-field class="filter-box"&gt;
              &lt;input matInput [matDatepicker]="endDate" placeholder="Choose a end date" formControlName="endDate" /&gt;
              &lt;mat-datepicker-toggle matSuffix [for]="endDate"&gt;&lt;/mat-datepicker-toggle&gt;
              &lt;mat-datepicker #endDate&gt;&lt;/mat-datepicker&gt;
            &lt;/mat-form-field&gt;
  
            &lt;button class="btn btn-primary filter-button ele" id="button-addon4" type="submit"&gt; Filter &lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="ticket-result"&gt;
      &lt;div *ngIf="allTickets" class="ticket-container"&gt;
        &lt;table mat-table [dataSource]="ticketList" class="mat-elevation-z8"&gt;
  
          &lt;!-- Ticket Column --&gt;
          &lt;ng-container matColumnDef="id"&gt;
            &lt;th mat-header-cell *matHeaderCellDef&gt; SIR ID &lt;/th&gt;
            &lt;td mat-cell *matCellDef="let element"&gt;
              &lt;a href='ticket/{{element.id}}'&gt;{{element.id}}&lt;/a&gt;
            &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;!-- Type Column event source --&gt;
          &lt;ng-container matColumnDef="findingSourceSystem"&gt;
            &lt;th mat-header-cell *matHeaderCellDef&gt; Source &lt;/th&gt;
            &lt;td mat-cell *matCellDef="let element"&gt; {{element.findingSourceSystem}} &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;!-- Type Column Related Event count --&gt;
          &lt;ng-container matColumnDef="label"&gt;
            &lt;th mat-header-cell *matHeaderCellDef&gt; Related Cases &lt;/th&gt;
            &lt;td mat-cell *matCellDef="let element"&gt; {{element.relatedVertices.length}} &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;!-- Type Column event source --&gt;
          &lt;ng-container matColumnDef="caseStatus"&gt;
            &lt;th mat-header-cell *matHeaderCellDef&gt; Case Status &lt;/th&gt;
            &lt;td mat-cell *matCellDef="let element"&gt; {{element.caseStatus}} &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;!-- Type Column event source --&gt;
          &lt;ng-container matColumnDef="caseCreateTimestamp"&gt;
            &lt;th mat-header-cell *matHeaderCellDef&gt; Case Created &lt;/th&gt;
            &lt;td mat-cell *matCellDef="let element"&gt; {{element.caseCreateTimestamp | date:'MMM d, y, h:mm:ss a'}}
            &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"&gt;&lt;/tr&gt;
          &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
          &lt;mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons&gt;&lt;/mat-paginator&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  
  <p>In the scss file:</p>
  
  <pre><code>#main-body {
    padding-top: 20px;
  }
  
  table {
      width: 80%;
      margin-left: 10%;
  }
  .search-bar {
    margin-top: 20px;
    margin-left: 10%;
    margin-right: 10%;
    position: fixed;
    width: 80%;
    background: white;
  }
  
  .ticket-result {
    padding-top: 160px;
  }
  
  .filter-card {
      margin-left: 10%;
      margin-right: 10%;
  }
  
  #related-ticket{
      margin-left: 10%;
      margin-right: 10%;
  }
  
  .link {
      color: blue;
      cursor: pointer;
      text-decoration: underline;
    }
  
    #button-addon4{
        width: 8%
    }
  
    // input::placeholder{
    //   color: black;
    // }  
  
    .fnt{
        color: blue;
    }
  
  .json-data {
      background: lightgrey;
      height: 500px;
      overflow: auto;
  }
  table#t01 {
      width: 50%; 
      background-color: #f1f1c1;
      border: 1px solid black;
      border-collapse: collapse;
    }
    #thh, #tdd, #trr {
      padding: 15px;
      text-align: left;
      border: 1px solid black;
    }
  
    .tab { margin-left: 110px; }
  
    .filter-box {
      width: 27%;
      margin-right: 5px;
      margin-left: 5px;
    }
  
  
  //   .filter-button {
  //       background: #007bff!important;
  //   }
  
    .ele {
        margin-right: 10px;
    }
  
    .filter-tab {
      margin: 2% 10%;
      border: none;
    }
  
    .related-ticket-table {
        margin: 2%;
    }
  
    .ticket-container {
      height: 520px;
      overflow: auto;
    }
  
    .dates{
      margin-left: 25%;
    }
    .btn-primary{
      background-color: #000099;
    }
    .border-primary{
      color: #000099;
    }
    #button-addon4{
      width: 15%
  }
  #iconSpan {
    position : absolute;
    top:1%;
    left :14%;
   }
  </code></pre>
  
  <p>ts code</p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
  import {MatPaginator} from '@angular/material/paginator';
  
  import { TicketService } from '../../services/ticket.service';
  
  import { Ticket } from '../../models/ticket';
  import { TicketDetail } from '../../models/ticket-detail';
  import { TicketDetailComponent } from '../ticket-detail/ticket.detail.component';
  import { query } from '@angular/animations';
  
  @Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.scss']
  })
  export class DashboardComponent implements OnInit {
  
    ticketList: Ticket[] = [];
    originalTicketList: Ticket[] = [];
    displayedColumns = ['id', 'findingSourceSystem','label', 'caseStatus', 'caseCreateTimestamp'];
    displayedDetailColumns = ['id', 'label', 'findingSourceSystem','caseCreateTimestamp'];
    filterAllForm: FormGroup;
    allTickets: boolean = true;
    labelList: string[];
    homeLabelList: string[];
    currentTicketId: string;
    searchBy: string = '';
  
    @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  
    constructor(private ticket: TicketService,
                private formBuilder: FormBuilder) { }  
  
    ngOnInit() {
      this.filterAllForm = this.formBuilder.group({
        startDate: [''],
        endDate: ['']
      });    
      this.getAllLabels();
      this.getAllTicket();
      this.getAllUniqueLabels();
    }
  
    get filterFormControls() { return this.filterAllForm.controls; }
  
    getAllTicket() {
      this.allTickets = true;
      let queryParams = '';
      console.log(this.currentTicketId) + " " + this.searchBy;
      if(this.searchBy === 'id') {
        queryParams = 'id=' + this.currentTicketId;
      } else if(this.searchBy === 'anchorPoint') {
        queryParams = "anchor=" + this.currentTicketId;
      }
      this.ticket.getAllTicket(queryParams).subscribe((res: Ticket[]) =&gt; {
        this.ticketList = res;
        this.ticketList['paginator'] = this.paginator;
        this.originalTicketList = this.ticketList;
      });
    }
  
    filterAllTicket() {
      let startFlag = this.filterAllForm.value.startDate != undefined &amp;&amp; this.filterAllForm.value.startDate != "";
      let endFlag = this.filterAllForm.value.endDate != undefined &amp;&amp; this.filterAllForm.value.endDate != "";
      if(startFlag || endFlag) {
        let arrays = [];
        for(let ticket of this.originalTicketList) {
          let ticketStartDate = new Date(ticket.caseCreateTimestamp);
          let flag = startFlag &amp;&amp; ticketStartDate &gt;= this.filterAllForm.value.startDate;
          if(endFlag) {
            flag = flag &amp;&amp; ticketStartDate &lt;= this.filterAllForm.value.endDate;
          }
          if(flag) {
              arrays.push(ticket);
          }   
        }
        this.ticketList = arrays;
      }
    }
  
    getAllLabels() {
      this.ticket.getLabel().subscribe((res: string[]) =&gt; {
        this.labelList = res;
        this.labelList.push("all");
        this.labelList.sort();
      });
    }
  
    getAllUniqueLabels() {
      this.ticket.getLabel().subscribe((res: string[]) =&gt; {
        this.homeLabelList = res;
        this.homeLabelList.sort();
      });
    }
  
    searchTicket() {
      this.getAllTicket();
    }
  }
  
  </code></pre>
  
  <p>Initially, I was wondering if the  <strong>.ticket-container</strong> class in the css effected the pagination, I removed, the table going up when I srcolling down. Also, still didn't show pages. This is what I got now. You can see the table can be scrolled down but did't have pages.
  <a href="https://i.stack.imgur.com/x5VCs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x5VCs.png" alt="enter image description here"></a></p>