diff --git a/projects/addon-table/components/table/directives/sort-by.directive.ts b/projects/addon-table/components/table/directives/sort-by.directive.ts index 3ee763f05c9d..88d66f7da919 100644 --- a/projects/addon-table/components/table/directives/sort-by.directive.ts +++ b/projects/addon-table/components/table/directives/sort-by.directive.ts @@ -1,5 +1,4 @@ import { - ChangeDetectorRef, ContentChildren, Directive, Inject, @@ -9,7 +8,7 @@ import { } from '@angular/core'; import {TuiComparator} from '@taiga-ui/addon-table/types'; import {EMPTY_QUERY} from '@taiga-ui/cdk'; -import {filter, map, tap} from 'rxjs/operators'; +import {delay, filter, map} from 'rxjs/operators'; import {TuiSortableDirective} from './sortable.directive'; import {TuiTableDirective} from './table.directive'; @@ -21,22 +20,30 @@ export class TuiSortByDirective>> { @ContentChildren(TuiSortableDirective, {descendants: true}) private readonly sortables: QueryList> = EMPTY_QUERY; - @Input() - tuiSortBy: string | keyof T | null = null; + @Input('tuiSortBy') + set sortBy(sortBy: string | keyof T | null) { + this.tuiSortBy = sortBy; + this.checkSortables(); + } @Output() readonly tuiSortByChange = this.table.sorterChange.pipe( - // recalculate ContentChildren (sortables) https://github.com/angular/angular/issues/38976 - tap(() => this.cdr.detectChanges()), + // delay is for getting actual ContentChildren (sortables) https://github.com/angular/angular/issues/38976 + delay(0), filter(() => !!this.sortables.length), map(sorter => this.getKey(sorter)), ); + tuiSortBy: string | keyof T | null = null; + constructor( - @Inject(ChangeDetectorRef) private readonly cdr: ChangeDetectorRef, @Inject(TuiTableDirective) private readonly table: TuiTableDirective, ) {} + checkSortables(): void { + this.sortables.forEach(s => s.check()); + } + private getKey(sorter: TuiComparator | null): keyof T | null { return this.sortables.find(s => s.sorter === sorter)?.key || null; } diff --git a/projects/addon-table/components/table/directives/sortable.directive.ts b/projects/addon-table/components/table/directives/sortable.directive.ts index ecbe0940b1a8..2910999ac707 100644 --- a/projects/addon-table/components/table/directives/sortable.directive.ts +++ b/projects/addon-table/components/table/directives/sortable.directive.ts @@ -1,4 +1,4 @@ -import {Directive, DoCheck, forwardRef, Inject, OnInit} from '@angular/core'; +import {Directive, forwardRef, Inject, OnInit} from '@angular/core'; import {TuiComparator} from '@taiga-ui/addon-table/types'; import {TuiThComponent} from '../th/th.component'; @@ -9,7 +9,7 @@ import {TuiTableDirective} from './table.directive'; selector: 'th[tuiTh][tuiSortable]', }) export class TuiSortableDirective>> - implements DoCheck, OnInit + implements OnInit { constructor( @Inject(forwardRef(() => TuiSortByDirective)) @@ -29,7 +29,7 @@ export class TuiSortableDirective>> this.th.sorter = this.sorter; } - ngDoCheck(): void { + check(): void { if (this.match && this.table.sorter !== this.sorter) { this.table.updateSorter(this.sorter); } diff --git a/projects/addon-table/components/table/th/th.component.ts b/projects/addon-table/components/table/th/th.component.ts index 2bceceb21650..2ed676eae649 100644 --- a/projects/addon-table/components/table/th/th.component.ts +++ b/projects/addon-table/components/table/th/th.component.ts @@ -13,7 +13,6 @@ import {tuiDefaultSort, TuiTableSortKeyException} from '@taiga-ui/cdk'; import {TUI_ELEMENT_REF} from '@taiga-ui/core'; import {TuiHeadDirective} from '../directives/head.directive'; -import {TuiSortByDirective} from '../directives/sort-by.directive'; import {TuiTableDirective} from '../directives/table.directive'; import {TUI_TABLE_OPTIONS, TuiTableOptions} from '../table.options'; @@ -53,9 +52,6 @@ export class TuiThComponent>> { @Optional() @Inject(forwardRef(() => TuiTableDirective)) readonly table: TuiTableDirective | null, - @Optional() - @Inject(forwardRef(() => TuiSortByDirective)) - private readonly sortBy: TuiSortByDirective | null, ) {} get key(): keyof T { @@ -81,10 +77,6 @@ export class TuiThComponent>> { } updateSorterAndDirection(): void { - if (this.sortBy) { - this.sortBy.tuiSortBy = this.key; - } - this.table?.updateSorterAndDirection( this.isCurrentAndAscDirection ? null : this.sorter, );