How to display Sr. No

Hi

  I have below code but i want to display Sr. No 

<ng-container *ngFor="let item of columns">
                <ng-container *ngIf="item.visible">
                  <ng-container [matColumnDef]="item.name">
                    <th mat-header-cell *matHeaderCellDef>
                      <div *ngIf="item.name !== 'actions'">
                        <span mat-sort-header> {{ item.title }} </span>
                      </div>
                      <div *ngIf="item.name === 'actions'">
                        <span>{{ item.title }} </span>
                      </div>
                    </th>
                    <td mat-cell *matCellDef="let element; let i = index">
                      
                      <ng-container
                      
                        *ngIf="item.name !== 'actions' && item.name !== 'isActive' && item.name !== 'createdAt'  && item.name !== 'isTeaching' && item.name !== 'isCurrent' && item.name !== 'isAdmissionsOpen' && item.name !== 'startDate' && item.name !== 'endDate' && item.name !== 'flagIcon'  && item.name !== 'deletedAt'">
                        {{ element[item.name] }}
                      </ng-container>
                      
                      <!-- <ng-container *ngIf="item.name === 'actions'">
                        <span mat-icon-button *ngFor="let actionButton of item.buttons"
                          (click)="actionButton.click($event ,element)" class="btn">
                          <ng-container *ngIf="actionButton.type !== 'hard-delete'  && actionButton.type !== 'Add-Section'">
                          </ng-container>
                        </span>
                      </ng-container> -->
                    </td>
                  </ng-container>
                </ng-container>
              </ng-container>

Thanks