When working with NgFor in Angular, I am interested in dynamically handling attributes using an index.
I have a collection of properties/interfaces that look like this:
vehicle1_Name,
vehicle2_Name,
vehicle3_Name
vehicle4_Name,
totalVehCount
To achieve this, I am utilizing a for-loop with totalVehCount.
numVehicle(n: number): Array<number> {
return Array(n);
}
<i class="fa fa-car" *ngFor="let veh of numVehicle(qt.totalVehCount);let indexOfelement=index;"></i>
The current implementation works smoothly, but I would like to dynamically display the title/tooltip as follows.
<i class="fa fa-car" title="{{qt.vehicle[indexOfelement+1]_Name}}"
*ngFor="let veh of numVehicle(qt.totalVehCount);let indexOfelement=index;"></i>
How can I accomplish this?
For example, if totalVehCount = 1, it should be displayed like this:
<i class="fa fa-car" title="{{qt.vehicle1_Name}}"></i>
If totalVehCount = 2, then it should be displayed like:
<i class="fa fa-car" title="{{qt.vehicle1_Name}}"></i>
<i class="fa fa-car" title="{{qt.vehicle2_Name}}"></i>