Is it possible to define paginator if its inside ngIf?

Question

I have a button and when it is clicked, search and table opens. Its in one component, is it possible to define paginator inside ngIf ?

    <div style="text-align: right;" *ngIf="showDokumendiLisaDokiNupp; else dokumendiLisamineContainer">
  <span *ngIf="isDokumendiMuutmineKasutajaleLubatud; else notAllowed"
        class="lisa-nupp"
        (click)="openDokumendiLisamine()">
    + Lisa dokument</span>
  <ng-template #notAllowed>
    <span class="not-allowed"
          matTooltip="Õigus puudub"
          matTooltipPosition="above">+ Lisa dokument</span>
  </ng-template>
</div>

<ng-template #dokumendiLisamineContainer>
<div class="container-fluid" style="background-color: rgb(248, 251, 251);">

paginator is here in the footer

<mat-paginator
              [pageSizeOptions]="pageSizeOptions"
              [pageSize]="defaultPageSize"
              (page)="onPageChange($event)">
            </mat-paginator>

in .ts file i declare it like that:

@ViewChild(MatPaginator) paginator: MatPaginator;

it always undefined. inside the if statement

Answer 1

You can use hidden attribute in the footer.

The (ngIf) conditon does not create an element (mat-paginator) in the DOM.

The value of paginator is undefined :

@ViewChild(MatPaginator) paginator: MatPaginator;

Hidden attribute makes the element invisible but still in the DOM:

<div [hidden]="!showDokumendiLisaDokiNupp">
           <mat-paginator
              [pageSizeOptions]="pageSizeOptions"
              [pageSize]="defaultPageSize"
              (page)="onPageChange($event)">
            </mat-paginator>
</div>