Ngx Duplicate is a subset of NgForOf
's functionality, which allows for duplicate blocks of code without needing to
create an array.
Note: This is not a replacement for
ngForOf
, anytime you already have an array use that instead.
Ngx Duplicate is available from npmjs.com
yarn add ngx-duplicate
npm install ngx-duplicate --save
You'll need to add the NgxDuplicateDirective
to the relevant parts of your application:
// Your Standalone Component
import {NgxDuplicateDirective} from 'ngx-duplicate';
@Component({
selector: 'app-component',
template: ``,
standalone: true,
imports: [NgxDuplicateDirective],
})
or
// Your NgModule
import {NgxDuplicateDirective} from 'ngx-duplicate';
@NgModule({
declarations: [...],
imports: [NgxDuplicateDirective],
exports: [...],
})
Note: You can also import the
NgxDuplicateModule
if you prefer not to use the standalone syntax of imports
// Your Template
<p *ngxDuplicate="5"></p>
Note: Since
ngxDuplicate
is a structural directive you will need to add the*
at the beginning or wrap you block in ang-template
and add the directive directly onto that
Name | Type | Description |
---|---|---|
count |
number |
Returns the current count of the duplicate |
first |
boolean |
Returns if the current element is the first |
last |
boolean |
Returns if the current element is the last |
odd |
number |
Returns if the current elements count is odd |
even |
number |
Returns if the current elements count is even |
// Your Template
<div *ngxDuplicate="5; let count = count; let first = first; let last = last; let odd = odd; let even = even">
<button
[class.button-first]="first"
[class.button-last]="last"
[class.button-odd]="odd"
[class.button-even]="even"
>
button number {{ count }}
</button>
</div>
Note: All contexts are strongly typed with context guards meaning if you make a spelling mistake the compiler can point you to the correct context value