The local template variable

Angular permits creating template-scoped variables to move data across the elements in a template:

<div *ngFor="let todo of todos"> 
  <todo-item [todo]="todo"></todo-item> 
</div> 

In the preceding template markup, we have declared a local variable, todo, using the let keyword. Then, we iterate through the collection variable todos; each todo item gets assigned to todo and is available for use in <todo-item>.

A local template variable can also be used to hold the DOM element. The following code shows that the author will hold the input element itself, and the value of the element can be accessed using author.value:

<!-- author refers to input element and passes its `value`to the event handler --> 
<input #author placeholder="Author Name"> 
<button (click)="updateAuthor(author.value)">Update</button>