Change Placement of pagination in .mat-tab-group

Question

I am trying to move the .mat-tab-header-pagination-after to next to the .mat-tab-header-pagination-before in a .mat-tab-group, the angular tab component. I am wondering how I am able to move the after pagination either in the html or css. Since it is automatic when the pagination shows, I am not sure how I am able to instantiate it differently so that it moves to the placement I want it to be. Any help from html or css familiar with angular components?

<mat-tab-group [selectedIndex]="selected.value"
             (selectedIndexChange)="selected.setValue($event)">
  <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab" (contextmenu)="onContextMenu($event, tab)"> 
    <ng-template mat-tab-label>
      <div class="col" style="margin-left: 20px;">{{tab}}</div>
      <button *ngIf="tab.name !== 'Main'" style="color:black; bottom:10px; right:10px" mat-icon-button (click)="closeTab(index)">
      <mat-icon>close</mat-icon>
      </button>
      <button mat-icon-button [matMenuTriggerFor]="contextMenu">
        <mat-icon>more_vert</mat-icon>
      </button>
    </ng-template>
    Contents for {{tab}} tab
  </mat-tab>
  <mat-tab disabled>
    <ng-template mat-tab-label>
        <button mat-icon-button (click)="addTab(selectAfterAdding.checked)">
            <mat-icon>add_circle</mat-icon>
        </button>
    </ng-template>
  </mat-tab>
</mat-tab-group>

Before Picture: Image of how it is now

After Picture with wanted placement: Image with moved placement

score 0 · Answer 1 · answered Feb 13 '22 at 19:08

Since .mat-tab-header is a flex container, you can user the order property on child elements to change it's order:

.mat-tab-header-pagination-controls-enabled {
  .mat-tab-header-pagination-before {
    order: 0;
  }

  .mat-tab-header-pagination-after {
    order:1;
  }

  .mat-tab-label-container {
    order: 2;
  }
}

Note that due to style encapsulation you need to apply those in global styles.

Stackblitz with updated styles (forked from official examples) here.

Change Placement of pagination in .mat-tab-group

1 Answers1