Title: Angular: I have an NgFor with an Index of loop, how can I assign the name of an element to be "myName+IndexOfLoop"
Tags: javascript;angular;typescript;single-page-application;angular8
Question: So I have the following
<div *ngFor="let step of validationSteps; let i = index "&gt;
<input matInput placeholder="SQL Query" name="sqlQuery" [(ngModel)]="validationSteps[i].sqlDetail.query"&gt;
</div&gt;
How can I make the name be "sqlQuery{loopOfIndexIHere}" with i appended

Here is the accepted answer: Just like with any other binding. Either using {{i}} on a normal attribute or using [attr]="'name'+i" on a bound attribute: Stackblitz
Your example would be one of the following:
<div *ngFor="let step of validationSteps; let i = index "&gt;
<input matInput
placeholder="SQL Query"
name="sqlQuery{{i}}"
[(ngModel)]="step.sqlDetail.query"&gt;
</div&gt;
<div *ngFor="let step of validationSteps; let i = index "&gt;
<input matInput
placeholder="SQL Query"
[name]="'sqlQuery' + i"
[(ngModel)]="step.sqlDetail.query"&gt;
</div&gt;

Here is another answer: Your code will be like this
[name]="'sqlQuery'+i"
Full code
<input matInput placeholder="SQL Query" [name]="'sqlQuery'+i" [(ngModel)]="validationSteps[i].sqlDetail.query"&gt;
Let me know if it work or not.
Comment for this answer: It does not. Error is r: Unexpected token 'i'

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2019:00:09/30/19', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><angular><typescript><single-page-application><angular8>', 'Title': 'Angular: I have an NgFor with an Index of loop, how can I assign the name of an element to be "myName+IndexOfLoop"', 'ViewCount': 273, 'id': 58166337, 'user_AboutMe': None, 'user_AccountId': 7500075.0, 'user_DisplayName': 'Daniel Haughton', 'user_Reputation': 925.0, 'user_Views': 250.0, 'user_id': 5698825.0}}