Angular directive for repeating HTML element by count

✓ Angular 18 compatible

Here's the demo or stackblitz live preview or codesandbox live preview

• Lightweight
• No dependencies!
• Directive way

🛠️ Install

1. Use yarn (or npm) to install the package

yarn add ngx-repeat

2. Add NgxRepeatDirective into your component`

import { NgxRepeatDirective } from 'ngx-repeat';

@Component({
  standalone: true,
  imports: [NgxRepeatDirective /*, ...*/],
   // ...
})

or module

import { NgxRepeatDirective } from 'ngx-repeat';

@NgModule({
 // ...
 imports: [
   // ...
   NgxRepeatDirective
 ]
})

🚀 Quick start

Example code

<div
  *ngxRepeat="3; 
    let index = index;
    let even = even;
    let odd = odd;
    let first = first;
    let last = last;"
>
  {{ index }} {{ even }} {{ odd }} {{ first }} {{ last }}
</div>

Result

  0 true false true false
  1 false true false false
  2 true false false true

🔧 Compatibility

| Angular | ngx-repeat | Install | | --------- | ---------- | ----------------------- | | >= 14 | 2.x | yarn add ngx-repeat | | >= 12 | 1.x | yarn add ngx-repeat@1 | | >= 5 < 13 | 0.x | yarn add ngx-repeat@0 |

📦 Dependencies

None

🪪 License

Copyright © 2021 - 2024 Dominik Hladik

All contents are licensed under the MIT license.