In a dynamic scenario of passing values within an ngFor loop, my directive seems to lose its styling.
This particular directive is designed for a datatable column where the column name is specified.
@Directive({ selector: '[my-dt-column]' })
export class MyDTColumn{
@Output() onSort: EventEmitter<any> = new EventEmitter();
@HostBinding('class.sorted-asc') sortedAsc;
@HostBinding('class.sorted-desc') sortedDesc;
_sortOrder: string;
public sort(order?: string){
this._sortOrder = order !== undefined ? order : (!this._sortOrder || this._sortOrder == 'desc') ?'asc' : 'desc'
this.sortedAsc = this.sortOrder === 'asc';
this.sortedDesc = this.sortOrder === 'desc';
}
get sortOrder(): string{
return this._sortOrder;
}
get isSorted(): boolean{
return this._sortOrder !== undefined && this._sortOrder !== null && this._sortOrder !== '';
}
column: string;
@Input('my-dt-column')
set setItem(column: any){
this.column = column;
}
@HostListener('click') onClick(){
this.sort();
this.onSort.emit({orderBy:this.column, sortOrder:this._sortOrder});
}
constructor(private el: ElementRef){}
}
Furthermore, some specific styles are applied to it, mainly indicating the sorting direction with an arrow-icon and managing its order.
:host >>>> table [my-dt-column]{
cursor: pointer;
}
:host >>>> table [my-dt-column] md-icon{
font-size: 10px;
height: 16px;
line-height: 16px;
vertical-align: middle;
opacity: 0;
color: rgba(0, 0, 0, 0.38);
transition: transform .25s, opacity .25s;
transform-origin: center center;
text-align: center;
}
:host >>>> table [my-dt-column].sorted-asc,
:host >>>> table [my-dt-column].sorted-desc{
color: rgba(0, 0, 0, 0.87);
}
:host >>>> table [my-dt-column].sorted-asc md-icon,
:host >>>> table [my-dt-column].sorted-desc md-icon{
opacity: 1;
color: rgba(0, 0, 0, 0.87);
}
:host >>>> table [my-dt-column].sorted-asc md-icon{
transform: rotate(0deg);
}
:host >>>> table [my-dt-column].sorted-desc md-icon{
transform: rotate(180deg);
}
:host >>>> table [my-dt-column]:hover md-icon{
opacity: 1;
}
Initially, I manually inserted table headers using this directive in HTML as shown below:
<th my-dt-column="ColumnName">some code</th>
<th my-dt-column="Column2Name">some code</th>
<th my-dt-column="Column3Name">some code</th>
<th my-dt-column="Column4Name">some code</th>
To avoid typing mistakes, I attempted a dynamically generated approach by creating an array in the parent component with the names of columns added through ngFor in HTML.
The issue arises where the style fails to apply despite setting the column name correctly.
<ng-container *ngFor="let column of columns">
<th [my-dt-column]="column.name">some code</th>
</ng-container>
Strangely, when a random string is bound instead, the style functions properly but results in incorrect column names.
<ng-container *ngFor="let column of columns">
<th my-dt-column="randomstring">some code</th>
</ng-container>
I've searched for solutions without success. Any insights or assistance would be greatly appreciated.
EDIT: One more observation - binding a random string shows up correctly in HTML attributes, whereas using the dynamically generated column name from ngFor does not display in the HTML despite being provided.
<th _ngcontent-c11="" mdtooltipposition="right" my-dt-column="randomstring" ng-reflect-position="right" ng-reflect-message="" ng-reflect-set-item="randomstring" class="">some code</th>
<th _ngcontent-c11="" mdtooltipposition="right" ng-reflect-position="right" ng-reflect-message="" ng-reflect-set-item="InstrumentTypeName" class="">some code</th>