components: [Table] Sort arrows are not rendered properly in tabs

Hey,

While we wait for 6.0 to come out of beta, I’ve figured a workaround. I force the arrows to be transformed into the expected state on SCSS, so that they don’t look ugly when loading the table the first time. Any hover over the arrows will override this workaround, so the default behavior won’t be affected:

::ng-deep .mat-sort-header-arrow.ng-trigger.ng-trigger-arrowPosition {
    opacity: 0;
}

::ng-deep .mat-sort-header-pointer-left.ng-trigger.ng-trigger-leftPointer{
    transform: rotate(-45deg);
}
::ng-deep .mat-sort-header-pointer-right.ng-trigger.ng-trigger-rightPointer{
    transform: rotate(45deg);
}

Still an issue on Angular 5.2.2 and Material 5.1.0

+1, waiting for a clean solution or fixes

So even with Version Angular Material 6.0.1, this misbehaviour still occurs 😦

I am facing the same issue. Waiting for the clean solution.

Scratch that, lazy-loading the tab content seems to fix the issue. Try putting <ng-template matTabContent></ng-template> around your tab content to fix the rendering issue. https://material.angular.io/components/tabs/overview#lazy-loading

@Barbiero the css fix seems to break if a default sort order is specified. The sort indicator is missing on the default sort column.

It’s a very very very bad bug for performance (@angular/material^5.2.0) It occured in mat-tabs, so the single solution is to hide these arrows why simply not to use images? It’s simple and it will work

.mat-sort-header-arrow {
  display: none !important;
}

Hey yeah - let’s open this back up to figure out what’s going on. Sounds like perhaps animations isn’t firing off.

Definitely try and get a plunker going so we can dive into this. Thanks

+1 still exists on 5.2.4 when table is wrapped in *ngIf:

<div *ngIf="expanded" @expandInOut>
    <mat-divider class="kd-on-top"></mat-divider>
    <mat-card-content class="kd-card-content"
                      [ngClass]="{'kd-card-content-table': role === 'table'}">
      ...
        <ng-content select="[content]"></ng-content>
      ...
    </mat-card-content>
   ...
  </div>

Great thanks for the repro. Looks like the states are being set properly but the animations framework isn’t animating the arrow. I’ll talk to the core animations guy to see if we can dive into this and see why it’s not triggering.

Hi

Good try, but I think it’s not the problem.

In fact, I found something interesting. It’s when I use a <md-tab> and if my <md-table> is not in the first tab (loaded on the load of the page), the initialization of arrow is bad. Sorry I didn’t have the time to do a plunker now ( if you don’t understand, I will try to do it begining with yours ) but the idea is something like that:

<mat-tab-group *ngIf="accountExist">
    <mat-tab label="{{'USER' | translate}}">
        <mat-card fxLayout="column">
          <mat-card-content>
            <app-info-user></app-info-user>  // my first <md-table> is inside this component
          </mat-card-content>
        </mat-card>
    </mat-tab>

    <mat-tab label="{{'FAMILY' | translate}}">
        <mat-card fxLayout="column">
          <mat-card-content>
            <app-families-user></app-families-user> // my second <md-table> is inside this component
          </mat-card-content>
        </mat-card>
    </mat-tab>
</mat-tab-group>

The second table “families” will have a ugly arrow even with with a sort “asc” or “desc”

same issue present also in the current angular-material documentation https://material.angular.io/components/table/overview#sorting

Chrome: Version 75.0.3770.142 (Official Build) (64-bit) OS: Windows 10 64-bit

I still have this issue https://gyazo.com/d5b184b83fe43eb58196705ac5d9a4c6 with navigation tabs mat-tab-nav-bar. Angular: 7.2.15 Material: 7.2.2 Typescript: 3.2.4 Chrome: 74.0.3729.157 (Official Build) (64-bit) OS: macOS Mojave 10.14.4

Just ran across this issue today 😢