How to add button to last component of a loop in Angular

Question

I am looping through the controls for my Angular form. However, the controls are coming from the server, and every form will be different. However, I want to add a submit button to the last control/material stepper. How would I do this?

<ng-container *ngFor="let control of formControls; let i = index">
        <div class="row">
          <div class="col">

            <mat-step *ngIf="['text', 'number'].includes(control.type)" [label]="control.name" class="mb-3">
              <mat-form-field class="mt-3">
                <input matInput [formControlName]="control.name" [placeholder]="control.name" [type]="control.type" class="mt-3">
              </mat-form-field>

              <div>
                <button mat-button matStepperPrevious uiKitButton="secondary" class="mr-1" type="button">Back</button>
                <button mat-button matStepperNext uiKitButton="primary" type="button">Next</button>
              </div>

            </mat-step>

            
            <mat-step *ngIf="['select'].includes(control.type)" [label]="control.name">
              <mat-form-field class="mt-3">
                <mat-select [formControlName]="control.name" [placeholder]="control.name">
                  <mat-option *ngFor="let option of control.options" [value]="option.name">{{ option.name }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
              
              <div>
                <button mat-button matStepperPrevious uiKitButton="secondary" class="mr-1" type="button">Back</button>
                <button mat-button matStepperNext uiKitButton="primary" type="button">Next</button>
              </div>
              
            </mat-step>

you can get the last item with `last` in the ngFor directive — Moshezauros, Dec 07 '20 at 20:18
Here the link to the corresponding angular documentation: https://angular.io/api/common/NgForOf#local-variables — MatterOfFact, Dec 07 '20 at 20:20
Does this answer your question? [Angular io (4) \*ngFor first and last](https://stackoverflow.com/questions/46930242/angular-io-4-ngfor-first-and-last) — MatterOfFact, Dec 07 '20 at 20:23

score 1 · Answer 1 · answered Dec 07 '20 at 22:23

NgFor supports exposes more values than index. Your code could look as similar to this:

<ng-container *ngFor="let control of formControls; let i = index; let isLast = last">
  <!-- your code -->

  <ng-container *ngIf="isLast">
    <button type="submit">Submit form</button>
  </ng-container>
</ng-container>

Ref

score 0 · Answer 2 · answered Dec 07 '20 at 20:19

0

You can check the last index of your formControls like this:

    <div *ngIf="i == (formControls.length - 1)">
      <button>
        Submit
      </button>
    </div>

answered Dec 07 '20 at 20:19

Akif

7,098
7
27
53

How to add button to last component of a loop in Angular

2 Answers2