# How to add an offset to an index in a *ngFor angular directive?

I want to display some data from a json but i can’t simply add an offset to the index and show all te data from a certain offset but get
ERROR TypeError: Cannot read property 'id' of undefinedand the text in the div doesn’t appear.

I have already tried to directly add a fixed number in the html file and it works (see the code below). But when it comes to use a variable “offset” (type:number) from typescript that is supposed to be updated with an input, the return type becomes undifined and the error appears. I also tried to use a method in my typescript file instead of doing the addition in the html file, and return the new index but it doesn’t work and show the error. I also tried to call the method using {{addition(i,offset)}} and put the result in a variable that I use as an index but it still showing the error.

For exemple, this html file is working fine :

<ng-container *ngFor="let article of data; let i = index">
<ng-container *ngIf="i<(nbElements)">
<div (click)="checkArticle(data[(i+3)].id)">
<p class="text-center"> {{data[(i+3)][dataKey]}}</p>
</div>
</ng-container>
</ng-container>


The div reacts to my click and the text appears.

However, this html file is not working, even if the offset is set as 3 (as the html above) using an input in the parent component :

<ng-container *ngFor="let article of data; let i = index">
<ng-container *ngIf="i<(nbElements)">
<div (click)="checkArticle(data[(i+offset)].id)">
<p class="text-center"> {{data[(i+offset)][dataKey]}}</p>
</div>
</ng-container>
</ng-container>


The error appears.

The offset (type:number) is defined in my typescript file this way, and is changed by the parent component and can easily be displayed by the child component using console.log(offset):

export class AppColumnComponent implements OnInit {
@Input() offset : number ;


I expect the output to be texts showing the articles of my data json, but as I change the offset using an input like that data[(i+offset)] the result is an error, maybe it’s impossible to use an other index using an other variable that a fixed number ?

Thank you for your support, it’s my first post on stackoverflow i hope i did it well ! 🙂

Source: AngularJS