How to render different content in html tag in for loop?-CodePudding

I have this *ngFor Loop. It render after each second element a h1 tag. Now I need to render different content in this tag

<ng-container *ngFor="let card of cards; index as i">
    <mat-card>
        <div >
            <a  target="_blank">
                {{card.title}}
            </a>
        </div>
        <div>
            <div >
                <a  target="_blank">
                    <small>{{card.pages}}</small>
                </a>
            </div>
        </div>
    </mat-card>
    <h1 *ngIf="(i % 2) == 1">First tag</h1>
</ng-container>

Exemple image

CodePudding user response：

 <h1 *ngIf="(i % 2) == 1">{{h2Content}}</h1>

in component

interval(1000).subscribe(()=>this.h2Content="SomeNewContentTakenFromSomewhereElse"));

this will allow you to assign new content to this.h2Content somehow (its up to you how)

CodePudding user response：

Maybe you can divide your index by two?

<h1 *ngIf="(i % 2) == 1"> This is the {{(i 1)/2}}th content </h1>

and use this value to determine the h1 content.