CODEWITHSUNDEEP
angular
Mel Pacheco
Mel Pacheco

Reputation: 799

access index outside *ngFor in angular

I have a div like this

<div *ngFor='let step of steps; let i =index'>

somewhere outside the ngFor I have this

<span>Step 1 of {{steps.length}}</span>

I need to keep track of the index outside the ngFor so this works

<span>Step {{i+1}} of {{steps.length}}</span>

the result being 1 of 4, 2 of 4.....

is this possible?

<header>
      <h1>form</h1>
      <div>
        <span>Step {{i+1}} of {{steps.length}}</span> // here is where I need the step index
        <button (click)="previous()"
           [disabled]="!hasPrevStep || activeStep.showPrev">Back</button>
        <button (click)="next()" [disabled]="!activeStep.isValid"
           [hidden]="!hasNextStep || activeStep.showNext">Next</button>
      </div>
    </header>
    <nav>
      <ul>
// here is where im looping over
        <li *ngFor="let step of steps; let i = index"
            (click)="goToStep(step)">
          <span class="u-flex1">
            <span>
            <a class="button>{{step.title}}</a>        
           </span>
          </span>
        </li>
      </ul>
    </nav>

Upvotes: 7

Views: 6217

Answers (2)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658067

<div *ngFor='let step of steps; let i =index'>
  <button (click)="active = i" [enabled]="active !== i">make active</button>
</div>

<span>Step {{active+1}} of {{steps.length}}</span>

Upvotes: 10

Eduard Void
Eduard Void

Reputation: 2714

you can wrap you ngFor loop in and display the current page only before the first one. https://angular.io/docs/ts/latest/guide/structural-directives.html#!#ng-container

<ng-container *ngFor='let step of steps; let i =index'>
  <span *ngIf='step.isActive'>Step {{i+1}} of {{steps.length}}</span>
  <div>Step content</div>
</ng-container>

It looks like you do not think a lot about the use-case or you did not publish all details in the question. It has no clue, to loop all steps if you want to display only one, but you can see how ng-container is working. It is repeating the content, but without the tag where *ngFor is defined

Upvotes: 0

Related Questions