CODEWITHSUNDEEP
angularindexingngforangular-components
Kevin
Kevin

Reputation: 187

Print current index from within Angular Component?

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!

Upvotes: 0

Views: 93

Answers (1)

IdontwearString
IdontwearString

Reputation: 367

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>

Upvotes: 1

Related Questions