The range pipe generates an array of numbers within a specified range, making it ideal for creating dropdown options, pagination controls, or any scenario requiring numeric sequences in templates. When working with Angular templates, you may need to generate an array of numbers for iteration. For example, if you have the number 20 and want to create an array from 1 to 20 to display in a dropdown list, Angular's @for directive cannot directly iterate over a number. While you could generate this array in TypeScript, there are cases where creating the array directly in the template is more convenient.
range pipe creates an array of numbers (positive and/or negative) progressing from start up to, but not including, end. range utility function is also available for use in TypeScript, which can be imported from ngx-lift. Generate arrays with different start and end values:
import {RangePipe} from 'ngx-lift';
@Component({
imports: [RangePipe],
template: `
<p>{{ [1, 5] | range }}</p>
<!-- Output: [1,2,3,4] -->
<p>{{ [10, 5] | range }}</p>
<!-- Output: [10,9,8,7,6] (start is bigger than end) -->
`
})
export class RangeExampleComponent {}Generate arrays with a custom step value:
import {RangePipe} from 'ngx-lift';
@Component({
imports: [RangePipe],
template: `
<p>{{ [1, 5, 2] | range }}</p>
<!-- Output: [1,3] (step by 2) -->
`
})
export class RangeStepExampleComponent {}Generate arrays in reverse order:
import {RangePipe} from 'ngx-lift';
@Component({
imports: [RangePipe],
template: `
<p>{{ [1, 5, 1, true] | range }}</p>
<!-- Output: [4,3,2,1] (reverse the array) -->
`
})
export class RangeReverseExampleComponent {}Generate CPU count options for a dropdown. This is useful when displaying a list of computers with varying maximum CPU counts and allowing users to select a CPU range.
import {RangePipe} from 'ngx-lift';
@Component({
imports: [RangePipe],
template: `
<div class="space-x-6">
<label for="cpu-count">Choose CPU count</label>
<select id="cpu-count">
@for (count of [1, 5] | range; track $index) {
<option [value]="count">{{ count }} CPU(s)</option>
}
</select>
</div>
`
})Angular pipe that generates an array of numbers within a specified range.
transform(value: [number]): number[]
transform(value: [number, number]): number[]
transform(value: [number, number, number]): number[]
transform(value: [number, number, number, boolean]): number[]value: [number] | [number, number] | [number, number, number] | [number, number, number, boolean]An array containing:
[number]: The end value (starts from 0)[number, number]: The start and end values[number, number, number]: The start, end, and step values[number, number, number, boolean]: The start, end, step, and inclusive flagAn array of numbers within the specified range.