Print current index from within Angular Component?

Question

I currently have an Angular component being replaced for each instance of an array:

<app-doc-item
    *ngFor="let docFeatureEl of docFeatures; let i = index";
    [documentFeature]="docFeatureEl"
    ></app-doc-item
  >

I would like to access the index each index (i) and print that value from within the component:

My child component looks as follows:

<a href="#" class="list-item" (click)="onSelected()">
  <div class="pull-left">
    <h4 class="list-group-item-heading">{{ docFeature?.string }}</h4>
  </div>
</a>

ideally, the goal is to pass that index as a parameter for the onSelected() to perform actions on that particular instance,

unfortunately whenever I try to access i Angular tells me property 'i' does not exist on type

How do I access this index produced from within the component?

Cheers!

I am not well versed in angularJS, but in modern angular I would pass that index as an input. Maybe you could try that — AlanOnym
– AlanOnym, Commented Feb 11, 2023 at 19:29

Bojan Kogoj · Accepted Answer · 2023-02-11 20:42:59Z

1

Add index as an input on app-doc-item component

<app-doc-item
    *ngFor="let docFeatureEl of docFeatures; let i = index";
    [documentFeature]="docFeatureEl"
    [index]="i">
</app-doc-item>

And use it in your onSelected

<a href="#" class="list-item" (click)="onSelected(index)">
  <div class="pull-left">
    <h4 class="list-group-item-heading">{{ docFeature?.string }}</h4>
  </div>
</a>

edited Feb 11, 2023 at 20:42

Bojan Kogoj

5,7084 gold badges39 silver badges63 bronze badges

answered Feb 11, 2023 at 19:52

IdontwearString

3672 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Print current index from within Angular Component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related