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

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

  • Output: In this example, the template reference is created by the #TheGeekTemplet, which is given in the next ng-templet 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 veriable items will be linked to the component class and directly be used in the variable named elt, made by let-elt.

  • Template File:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

  • Component File:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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]
    }

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

  • Output:
    This is GeeksForGeeks
    Default Value



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.