RepeatPipe

Import

import { RepeatPipe } from 'ngxtension/repeat-pipe';

Usage

Basic

Use the repeat pipe as an easy way to loop over a number of iterations.

import { Component } from '@angular/core';
import { RepeatPipe } from 'ngxtension/repeat-pipe';

@Component({
  imports: [RepeatPipe],
  template: `
    <ul>
      @for (i of 3 | repeat; track i) {
        <li>{{ i }}</li>
      }
    </ul>
  `,
})
export class App {}

This will produce the following output:

<!-- Output -->
<!-- <li>0</li> -->
<!-- <li>1</li> -->
<!-- <li>2</li> -->

With NgFor

The pipe can also be utilized with the ngFor directive.

Tip

The TrackByFunction is not automatically set. Checkout the Repeat Directive as an alternative.

import { Component } from '@angular/core';
import { Repeat } from 'ngxtension/repeat';

@Component({
  imports: [Repeat],
  template: `
    <ul>
      <li *ngFor="let i; repeat: 3">{{ i }}</li>
    </ul>
  `,
})
export class App {}

This will produce the same output as the directive variant.

import { Component } from '@angular/core';
import { NgFor } from '@angular/common';
import { RepeatPipe } from 'ngxtension/repeat-pipe';

@Component({
  imports: [NgFor, RepeatPipe],
  template: `
    <ul>
      <li *ngFor="let i of 3 | repeat">{{ i }}</li>
    </ul>
  `,
})
export class App {}

This will produce the same output as above.

Change start point

You can specify a startAt value as the second argument passed into the pipe.

import { Component } from '@angular/core';
import { RepeatPipe } from 'ngxtension/repeat-pipe';

@Component({
  imports: [RepeatPipe],
  template: `
    <ul>
      @for (i of 3 | repeat: 10; track i) {
        <li>{{ i }}</li>
      }
    </ul>
  `,
})
export class App {}

This will produce the following output:

<!-- Output -->
<!-- <li>10</li> -->
<!-- <li>11</li> -->
<!-- <li>12</li> -->

API

Inputs

• length: number - A non-negative integer, specifying the number of iterations.
• startAt: number - A integer, specifying the start point of iterations.

Validation

• An error is thrown if length is either negative or not an integer.
• An error is thrown if startAt is not an integer.