Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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

 



Last Updated : 18 May, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads