Show more/less button to toggle extra list items

more-less-items.directive.ts

import {
  AfterContentInit,
  ContentChildren,
  Directive,
  ElementRef,
  Input,
  QueryList,
  Renderer2,
} from '@angular/core';
import { startWith } from 'rxjs/operators';

enum Text {
  MORE = 'more',
  LESS = 'less',
}

enum Display {
  BLOCK = 'block',
  NONE = 'none',
}

/**
 * Usage:
 *    <ul fcMoreLessItems limit="5">
 *      <li #fcToggleItem *ngFor="let item of list">{{ item }}</li>
 *    </ul>
 */
@Directive({
  selector: '[fcMoreLessItems]',
})
export class MoreLessItemsDirective implements AfterContentInit {
  @Input() limit: number = 0;
  @Input() display: string = Display.BLOCK; // block | grid | flex | ...
  @ContentChildren('fcToggleItem') togglableItems!: QueryList<ElementRef>;

  expanded: boolean = false;
  readonly toggleEl: HTMLElement;

  constructor(readonly renderer: Renderer2, readonly element: ElementRef) {
    this.toggleEl = this.createToggleElement();
  }

  ngAfterContentInit() {
    this.renderer.appendChild(this.element.nativeElement, this.toggleEl);
    this.togglableItems.changes
      .pipe(startWith(new QueryList()))
      .subscribe(() => {
        if (!this.expanded) {
          // Hide extra items
          this.updateItemsDisplay(Display.NONE);
        }
      });
  }

  private createToggleElement(): HTMLElement {
    const button = this.renderer.createElement('button');
    button.innerText = Text.MORE;
    button.onclick = () => {
      if (this.expanded) {
        this.updateItemsDisplay(Display.NONE);
        this.toggleEl.innerText = Text.MORE;
      } else {
        this.updateItemsDisplay(this.display);
        this.toggleEl.innerText = Text.LESS;
      }
      this.expanded = !this.expanded;
    };
    return button;
  }

  private updateItemsDisplay(cssClass: string) {
    for (let i = this.limit; i < this.togglableItems.length; i++) {
      const child = this.togglableItems.get(i)!;
      child.nativeElement.style.display = cssClass;
    }
  }
}