What is the meaning of let-* in Angular 2 Templates ?

18 May, 2021
The let keyword in Angular declares a template input variable that is referenced within the template. In Angular, the micro syntax is used to configure a directive in a compact and friendly string. It is a capability given in angular to embed the variables in the template directly by translating that string into attributes on the <ng-template> tag. 
Syntax: 
let-variable_name = "Exported_var"
or  
let-variable_name
Usage: Being a micro syntax, let is used to create temporary variable in angular which can be linked by the variable of the component class. So to bring the component variable information to the template, let is used it.
Example 1: With this example, there is a very simple implementation of the creation of an embedded variable using the ng-template tag. Here variables are formed, for which the value is assigned as This is ‘GeeksForGeeks’. The code below is to be written in the template file of the component, this is an angular 5 update.
Template File:
HTML
<!DOCTYPE html><html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>let-* in Angular 2</title></head> <body>    <ng-template [ngTemplateOutlet]=                 "TheGeekTemplate" [ngTemplateOutletContext]="                 {                  GeeksForGeeks: 'This is GeeksForGeeks'                 }"                 #TheGeekTemplate let-GFG="GeeksForGeeks">        <div>{{GFG}}</div>     </ng-template> </body> </html>
Output: In this example, the template reference is created by the #TheGeekTemplate, which is given in the next ng-template tag under the [ngTemplateOutletContext] property. The variable GFG is the variable defined by the let keyword which has a string acting as the export variable and to this variable a new value is assigned within the template by [ngTemplateOutletContext] property. For the variable Geek, the value is not provided so it takes the implicated value given to the $implicit i.e. default value. 
This is GeeksForGeeks
Example 2: This example is a demo for using let in ngFor directive. Here a variable items will be linked to the component class and directly be used in the variable named elt, made by let-elt. 
Template File:
HTML
<!DOCTYPE html><html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>let-* in Angular 2</title></head> <body>       <!--The item variable used as -->    <ng-template ngFor let-elt [ngForOf]="array">        <div style="color:green;">            <h1>{{elt}} GeeksForGeeks</h1>        </div>    </ng-template></body> </html>
Component File:
Javascript
import { Component } from '@angular/core'; @Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent {   // The array variable in component file  array=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}
Output: Here the output will be GeeksForGeeks written 10 times along with the index, in the code the array variable is an array with elements in range 1 to 10. The elements are shown by the embedded variable item using let, along with GeeksForGeeks written on it. 
let-* Vs let-*=”Var”: The let-*=”Var” will pick the value of the variable defined in the ngTemplateOutletContext property of the <ng-template> tag and “let-*” will pick up the default value defined in the same property given under the $implicit variable name.
Example 3: Here two variables are formed, for one the value is assigned and for the second variable, the values will be linked to an export variable. The code below is to be written in the template file of the component.  
Template File:
HTML
<!DOCTYPE html><html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>let-* in Angular 2</title></head> <body>    <ng-template [ngTemplateOutlet]=                 "TheGeekTemplate" [ngTemplateOutletContext]="{                     $implicit: 'Default Value',                     GeeksforGeeks: 'This is GeeksforGeeks'                 }"                 #TheGeekTemplate let-GFG="GeeksforGeeks" let-Geek>        <div>{{GFG}}</div>        <div>{{Geek}}</div>     </ng-template></body> </html>
Output: 
This is GeeksForGeeks
Default Value
 
bunnyram19
saurabh1990aror
AngularJS-Misc
Picked
AngularJS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Routing in Angular 9/10
Angular PrimeNG Dropdown Component
Angular 10 (blur) Event
How to make a Bootstrap Modal Popup in Angular 9/8 ?
How to create module with Routing in Angular 9 ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?