ngx-range/README.md

An Angular structural directive to enumerate over a range of numbers

# ngx-range

An Angular structural directive to enumerate over a range of numbers

## Installation

Add the package to your application.

```
npm install --save ngx-range
```

## Versions

- Angular 11: 1.1.0
- Angular 15: 5.0.0
- Angular 16: 6.0.0
- Angular 17: 7.0.0
- Angular 18: 8.0.0
- Angular 19: 9.0.0

## Demo

https://stackblitz.com/edit/ngx-range-demo

## Getting started

Import the range module to your application module.

```
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxRangeModule } from 'ngx-range';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxRangeModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

## Using the directive

Add the directive to iterate over a set of numbers. There are 3 properties you can use to control the iteration:

- from: the starting number, inclusive
- to: the ending number, exclusive
- by: the incremental step value, defaults to 1

For example, the following template

```
<ul>
  <li *ngxRange="let value from 0 to 20 by 5">
    Item #{{value}}
  </li>
</ul>
```

will output

- Item #0
- Item #5
- Item #10
- Item #15