CODEWITHSUNDEEP
angular
Ahmad
Ahmad

Reputation: 141

In angular how can we use local variable in ngIf that has been defined in the ngFor loop?

I am new to angular and need the help in implementing the dynamic vertical tabs:

I am using the variable i that I defined in the ngFor loop in the ngIf condition. I don't know how to use the variable i in the ngIf condition. I tried the below code but it doesn't seem to work.

 <div
          class="pb-5"
          *ngFor="let studentBatch of studentBatchList; let i = index"
        >
          <div
            id="{{ 'tab-content-' + (3 + i) }}"
            *ngIf="currTab == 'tab-content-(3+i)'"
          >
            {{ i + 3 }} <br />
            {{ studentBatch.batchId }}
          </div>
        </div>

TS code:

showtabcontent(id) {
debugger;
id = 'tab-content-' + id;
// this.currTab = 'tab-content-0';
this.currTab = id;
alert(id);

}

Upvotes: 0

Views: 404

Answers (1)

Marco
Marco

Reputation: 1093

In the *ngIf i+3 is considered as a string. You must close the single quote before making mathematical operation.

*ngIf="currTab == 'tab-content-' + (3 + i)"

Complete example:

<div class="pb-5" *ngFor="let studentBatch of studentBatchList; let i = index">
    <div id="{{ 'tab-content-' + (3 + i) }}" *ngIf="currTab == 'tab-content-' + (3 + i)">
        {{ i + 3 }} <br />
        {{ studentBatch.batchId }}
    </div>
</div>

Upvotes: 1

Related Questions