ngRepeat

🚀 feature request

create a ngRepeat Structural Directive

Description

create a directive to explicit indicate the number of time an element have to repeat. Instead of create an array of elements to only make a ngFor

Describe the solution you’d like

If you have a solution in mind, please describe it.

@Directive({
  selector: '[ngRepeat]'
})
export class RepeatDirective implements OnChanges {

  private quantity: number;
  @Input()
  public set ngRepeat(value: number) {
    this.quantity = value;
  }

  public constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {

  }

  public ngOnChanges() {
    const length = this.viewContainer.length;

    for (let x = length; x < this.quantity; x++) {

      this.viewContainer.createEmbeddedView(this.templateRef, { index: x, onRemoveAt: this.onRemoveAt(this.viewContainer) }, x);
    }
  }

  /**
   * expose a hook
   *
   * @param viewContainer container ref
   */
  private onRemoveAt(viewContainer: ViewContainerRef) {

    return (index) => {

      viewContainer.remove(index);

     // update index
      for (let x = 0; x < viewContainer.length; x++) {

        const view = viewContainer.get(x) as EmbeddedViewRef<any>;

        viewContainer.move(view, x);
        view.context.index = x;
      }
    };
  }

}

Usage

simple usage

<ng-container *ngRepeat="5, let i = index">
      <div>element N° {{i}}</div>
</ng-container>

with delete

<ng-container *ngRepeat="quantity, let i = index; let onRemove = onRemoveAt">
      <div>element N° {{i}}</div>
      <button (click)="onRemove(i); quantity -= 1">Delete</button>
</ng-container>

[vagostep]

https://www.npmjs.com/package/vstep-ng-repeat

[Airblader]

My library ngx-structurals also has this. I found this mostly useful for prototyping and building skeleton screens. Beyond that I’ve never had the need for this.