Как вставить / отобразить div внутри ngfor по определенному индексу

Question

Я использую угловой материал для отображения серии изображений.Я хочу отобразить div / component с определенным индексом внутри ngfor

<div #cardPicture fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="1%" fxLayoutAlign="left">
    <mat-card matTooltip="{{image.Name}}" class="card-picture" (click)="onViewDetail(image)" *ngFor="let image of images; let i = index">
        <img mat-card-image src="{{image.img}}">
        <div class="name">{{image.Name}}</div>
    </mat-card>
</div>
<!-- Image Detail -->
<div class="details" id="viewImageDetail">
    <app-image-detail [imageDetail]="viewImageDetail"></app-image-detail>
</div>

При нажатии на конкретное изображение я хочу отобразить компонент детализации изображения под изображением, и следующая строка должна быть сдвинута вниз

Answer 1

Я мог почти достичь того, что хотел.Ниже приведено изменение

<div #cardPicture fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="1%" fxLayoutAlign="left">
   <div class="imageGrid" *ngFor="let image of images; let i = index">
      <mat-card matTooltip="{{image.Name}}" class="card-picture" (click)="onViewDetail(image, i)">
         <img mat-card-image src="{{image.Imagebyte}}">
         <div class="name">{{image.Name}}</div>
      </mat-card>
    <div class="details" id="viewImageDetail" *ngIf="i==index">
      <app-update-image-detail [imageDetail]="viewImageDetail"></app-update-image-detail>
    </div>
   </div>
 </div>

Если у кого-либо есть ответ, пожалуйста, не стесняйтесь его опубликовать