An index identifies a position in an array. In TypeScript, put it in square brackets to read a value or assign a replacement: `myArray[0]` reads the value at position 0, while `myArray[0] = "Tuesday"` changes it. The compiler checks assignments against the array’s element type. section 4.3.1
Listing 4.15. Modifying the contents of an array in the main.ts file in the src folder
let myArray: (number | string | boolean)[] = [100, "Adam", true];
myArray[0] = "Tuesday";
let val = myArray[0];
console.log(`Value: ${val}`);
The first array entry changes from `100` to `"Tuesday"`; reading index 0 afterward produces `Tuesday`. section 4.3.1
In an Angular `*ngFor` template, `index` is the zero-based position of the current data object. Assign it to a local variable with `let i = index`, then use that variable inside the repeated elements. `count` supplies the number of objects; `{{ i + 1 }} of {{ c }}` turns the zero-based position into a reader-facing row counter. section 12.2.3
Listing 12.7. Using the Index Value in the template.html File in the src/app Folder
<div class="text-white">
<div class="bg-info p-2">
There are {{count()}} products.
</div>
<div class="p-1">
<table class="table table-sm table-bordered text-dark">
<tr><th></th><th>Name</th><th>Category</th><th>Price</th></tr>
<tr *ngFor="let item of products();
let i = index; let c = count">
<td>{{ i + 1 }} of {{ c }}</td>
<td>{{item.name}}</td>
<td>{{item.category}}</td>
<td>{{item.price}}</td>
</tr>
</table>
</div>
</div>
<button class="btn btn-info text-white mt-2" (click)="removeProduct()">
Remove
</button>
The product table assigns `index` and `count` to local variables and displays each row’s position alongside its total. section 12.2.3
Position also supports conditional presentation. The `odd` and `even` template values indicate the parity of an item’s index, while `first` and `last` identify the ends of the data source. These values can drive class bindings on repeated table rows. section 12.2.3
