Adding <hr>/ HTML element between sorted elements in array in Angular

user_10585952 0
Viewed 54

As in topic - I have array with sorted elements. My function with sorting elements inside array:

private reorderOptions(filter: FormFilterConfig): void {
    const filterOptions: FormFilterOption[] = filter.formOptions
      .sort((x: FilterOption, y: FilterOption) => x.name > y.name ? 1 : -1);
    filter.formOptions = [
      ...filterOptions.filter((o: FormFilterOption) => o.isSelected),
      ...filterOptions.filter((o: FormFilterOption) => !o.isSelected)
    ];

html:

<component-checkbox *ngFor="let formControl of filteredFormControls[i]" 
  [formControl]="formControl">{{ getCheckboxName(i, formControl) }}
</component-checkbox>

I need to somehow add <hr> selector between o.isSelected and !o.isSelected. Does anyone has idea how to solve it?

angular typescript
1 Answers

This is something you could do inside your HTML template like:

<div *ngFor="let item of items; let i = index">
  <hr *ngIf="shouldRenderHR(i)"/>
  <!-- render item here -->
</div>

And then the following shouldRenderHR in TypeScript:

  public shouldRenderHR(i) {
    if (i == 0) return false;
    if (
       (this.items[i].isSelected && !this.items[i-1].isSelected) ||
       (!this.items[i].isSelected && this.items[i-1].isSelected)
    ) return true;

    return false;
  }
user_29021610
Related