Tengo un componente con una tabla e hice mis etiquetas <th></th> para poder ordenar los datos cuando hace clic en una etiqueta th , los datos se ordenan por ASC o DESC
en mi componente establecer el evento de clic y las variables:
public sort_by = "name"; public sort_order = "asc"; sortTableBy(sort_by:string){ if(sort_by === this.sort_by){ this.sort_order = (this.sort_order === 'asc' ? 'desc' : 'asc'); }else{ this.sort_order = "asc"; this.sort_by = sort_by; } this.updateData(); }y esta es mi plantilla HTML
<th> <div (click)="sortTableBy('name')"> <span>User Name</span> <i *ngIf="sort_by == 'name' && sort_order == 'desc'" class="fa fa-sort-up"></i> <i *ngIf="sort_by == 'name' && sort_order == 'asc'" class="fa fa-sort-down"></i> </div> </th>Porque voy a usar esta tabla más de una vez me gustaría que estuviera más limpia y quiero que quede más o menos así:
<th> <sortable sortBy="name" value="User Name"></sortable> </th>No sé cómo crear este tipo de componente y cómo comunicarse entre componentes.
Puede crear un componente llamado header-sortable y usarlo en el componente principal de la siguiente manera:
<header-sortable [name]="'User Name'" [prop]="'name'" [sortBy]="sortBy" (sort)="onSort($event)"></header-sortable>y aquí está el esqueleto del componente
@Component({ selector:'header-sortable', template: ` <th (click)="sortTableBy()" style="cursor:pointer;"> <div> <span>{{name}}</span> <i *ngIf="sortBy == prop && sort_order == 'desc'" class="fa fa-sort-up"></i> <i *ngIf="sortBy == prop && sort_order == 'asc'" class="fa fa-sort-down"></i> </div> </th> ` }) export class HeaderSortable { @Input() sortBy: string; @Input() name: string; @Input() prop: string; @Output() sort = new EventEmitter<any>(); sortTableBy() { let dir; if( this.sortBy == this.prop) { dir = this.sortBy === 'desc' ? 'asc' : 'desc'; } else { dir = 'desc'; } this.sort.emit({prop, dir}) } }Simplemente mueva el método de clic al <th> como se muestra a continuación,
<th (click)="sortTableBy('name')" style="cursor:pointer;"> <div> <span>User Name</span> <i *ngIf="sort_by == 'name' && sort_order == 'desc'" class="fa fa-sort-up"></i> <i *ngIf="sort_by == 'name' && sort_order == 'asc'" class="fa fa-sort-down"></i> </div> </th>Nota: Se agregó un estilo para que el usuario sepa que puede hacer clic en él.
Actualización 1: 5 <th> también contendrán el mismo método de clic con un parámetro de entrada como codificado en cadena.
<th (click)="sortTableBy('name')"> <th (click)="sortTableBy('age')"> <th (click)="sortTableBy('gender')">y así.