Проблема положения углового материала в Paginator

Question

У меня вопрос, как я могу установить paginator после таблицы?

Проблема: Я использую для приложения Todo таблицу материалов и paginator.Все работало нормально.Но теперь, пагинатор перед столом.Как я могу установить paginator внизу, когда таблица загружается каждый раз, когда новый?

код:

<section class="todoapp">
  <div class="todoContainer">
    <header>
      <h1>Todo</h1>
      <span class="todo-count"><strong>{{todoDataService.todos.data.length}}</strong> {{todoDataService.todos.data.length == 1 ? 'item' : 'items'}} left</span>
    </header>
    <div class="container">

      <div class="row input-group">
          <div>
            <mat-form-field class="formInput">
              <input matInput #input [formControl]="todoAdd" autofocus="" class="new-todo inputTodo" placeholder="Add a new Todo..." type="text">
              <button mat-icon-button  type="submit" (click)="addTodo(input)" [disabled]="input.invalid" class="addButton"><mat-icon class="addIcon">add_circle</mat-icon></button>
            </mat-form-field>
            <div class="errorMessageRequired" *ngIf="todoAdd.errors && todoAdd.errors.required">
              Name is required.
            </div>
            <div class="errorMessageMinLength" *ngIf="todoAdd.errors && todoAdd.errors.minlength">
              Todo must be at least 2 characters long.
            </div>

          </div>
          <div ><mat-form-field  class="formSearch">
            <input matInput (keyup)="applyFilter($event.target.value)" class="searchTodo" placeholder="Filter">
            <mat-icon matSuffix>search</mat-icon>
          </mat-form-field></div>
      </div>
    </div>
    <div>
     <section *ngIf="todoDataService.todos.data.length > 0" class="main">

      <div class="view">
        <table mat-table [dataSource]="todoDataService.todos" class="mat-elevation-z8">
          <ng-container matColumnDef="checkbox">
            <th mat-header-cell *matHeaderCellDef></th>
            <td mat-cell *matCellDef="let todo"><mat-checkbox [checked]="todo.complete" class="toggle">
             </mat-checkbox></td>
          </ng-container>

          <ng-container matColumnDef="title">
            <th mat-header-cell *matHeaderCellDef> title </th>
            <td mat-cell *matCellDef="let todo"><label class="labelTodo">{{todo.title}}</label></td>
          </ng-container>

          <ng-container matColumnDef="action">
            <th mat-header-cell *matHeaderCellDef> action </th>
            <td mat-cell *matCellDef="let todo">
              <button mat-icon-button (click)="openDialogEdit(todo)" value="{{todo.id}}" class="editButton"><mat-icon class="iconEdit">edit</mat-icon></button>
              <button mat-icon-button (click)="warningMessageDelete(todo.id)" class="destroyButton"><mat-icon class="iconDelete">delete</mat-icon></button>
              <button mat-icon-button (click)="openDialog(todo)" value="{{todo.id}}" class="infoButton"><mat-icon class="iconInfo">info</mat-icon></button>
              <i class="material-icons md-48 star">star</i>
            </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
      </div>
    </section>
    </div>
    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
    <footer *ngIf="todoDataService.todos.data.length > 0" class="footer">
    </footer>
  </div>
</section>

Результат: