How to declare a variable in a template in Angular

Question

I have the following template    lt div gt     lt span gt   aVariable   lt  span gt   lt  div gt   and would like to end up with    lt div  quot let a   aVariable quot  gt     lt span gt   a   lt  span gt   lt  div gt   Is there a way to do it

User · Answer

update 3  Issue 2451 is fixed in Angular 4 0 0  See also    https   github com angular angular pull 13297 https   github com angular angular commit b4db73d https   github com angular angular issues 13061   update 2  This isn t supported    There are template variables but it s not supported to assign arbitrary values  They can only be used to refer to the elements they are applied to  exported names of directives or components and scope variables for structural directives like ngFor    See also https   github com angular angular issues 2451  Update 1   Directive     selector    var      exportAs   var     class VarDirective      Input   var any      and initialize it like   lt div  aVariable  var  var  abc  gt  lt  div gt    or   lt div  aVariable  var   var    abc   gt  lt  div gt    and use the variable like   lt div gt   aVariable var   lt  div gt     not tested     aVariable creates a reference to the VarDirective  exportAs   var   var  abc  instantiates the VarDirective and passes the string value  abc  to it s value input  aVariable var reads the value assigned to the var directives var input

User · Answer

For those who decided to use a structural directive as a replacement of  ngIf  keep in mind that the directive context isn t type checked by default  To create a type safe directive ngTemplateContextGuard property should be added  see Typing the directive s context  For example   import   Directive  Input  TemplateRef  ViewContainerRef   from   angular core     Directive          don t use  ng  prefix since it s reserved for Angular     selector    appVar       export class VarDirective lt T   unknown gt           https   angular io guide structural-directives typing-the-directives-context     static ngTemplateContextGuard lt T gt  dir  VarDirective lt T gt   ctx  any   ctx is Context lt T gt            return true             private context   Context lt T gt        constructor          private vcRef  ViewContainerRef          private templateRef  TemplateRef lt Context lt T gt  gt                 Input       set appVar value  T            if  this context                this context appVar   value            else               this context     appVar  value                this vcRef createEmbeddedView this templateRef  this context                      interface Context lt T gt        appVar  T       The directive can be used just like  ngIf  except that it can store false values    lt ng-container  appVar  false as value  gt   value   lt  ng-container gt    lt  -- error  User doesn t have  nam  property-- gt   lt ng-container  appVar  user as user  gt   user nam   lt  ng-container gt    lt ng-container  appVar  user    async as user  gt   user name   lt  ng-container gt    The only drawback compared to  ngIf is that Angular Language Service cannot figure out the variable type so there is no code completion in templates  I hope it will be fixed soon

User · Answer

In case if you want to get the response of a function and set it into a variable  you can use it like the following in the template  using ng-container to avoid modifying the template    lt ng-container  ngIf  methodName parameters  as respObject  gt      respObject name    lt  ng-container gt    And the method in the component can be something like  methodName parameters  any   any     return  name   Test name

User · Answer

I liked the approach of creating a directive to do this  good call  yurzui     I ended up finding a Medium article Angular  let  Directive which explains this problem nicely and proposes a custom let directive which ended up working great for my use case with minimal code changes   Here s the gist  at the time of posting  with my modifications   import   Directive  Input  TemplateRef  ViewContainerRef   from   angular core   interface LetContext  lt T gt      appLet  T   null     Directive     selector    appLet       export class LetDirective  lt T gt      private  context  LetContext  lt T gt      appLet  null      constructor  viewContainer  ViewContainerRef   templateRef  TemplateRef  lt LetContext  lt T gt   gt          viewContainer createEmbeddedView  templateRef  this  context          Input     set appLet value  T        this  context appLet   value         My main changes were    changing the prefix from  ng  to  app   you should use whatever your app s custom prefix is  changing appLet  T to appLet  T   null   Not sure why the Angular team hasn t just made an official ngLet directive but whatevs   Original source code credit goes to  AustinMatherne

User · Answer

You can declare variables in html code by using a template element in Angular 2 or ng-template in Angular 4    Templates have a context object whose properties can be assigned to variables using let binding syntax  Note that you must specify an outlet for the template  but it can be a reference to itself    lt ng-template let-a  aVariable   ngTemplateOutletContext     aVariable  123     ngTemplateOutlet   selfie   selfie gt     lt div gt       lt span gt   a   lt  span gt     lt  div gt   lt  ng-template gt    lt  -- Output  lt div gt     lt span gt 123 lt  span gt   lt  div gt  -- gt    You can reduce the amount of code by using the  implicit property of the context object instead of a custom property    lt ng-template let-a  ngTemplateOutletContext      implicit  123     ngTemplateOutlet   t   t gt     lt div gt       lt span gt   a   lt  span gt     lt  div gt   lt  ng-template gt    The context object can be a literal object or any other binding expression  Even pipes seem to work when surrounded by parentheses   Valid examples of ngTemplateOutletContext     ngTemplateOutletContext     aVariable  123     ngTemplateOutletContext     aVariable   3 141592   number  3 1-5       ngTemplateOutletContext     aVariable  anotherVariable    use with let-a  aVariable   ngTemplateOutletContext      implicit  anotherVariable    use with let-a  ngTemplateOutletContext   ctx  where ctx is a public property

User · Answer

original answer by  yurzui won t work startring from Angular 9 due to - strange problem migrating angular 8 app to 9  However  you can still benefit from ngVar directive by having it and using it like  lt ng-template  ngVar   quot variable quot  gt  your code  lt  ng-template gt   although it could result in IDE warning   quot variable is not defined quot

User · Answer

Here is a directive I wrote that expands on the use of the exportAs decorator parameter  and allows you to use a dictionary as a local variable   import   Directive  Input   from   angular core    Directive       selector   localVariables        exportAs  localVariables     export class LocalVariables        Input  localVariables   set localVariables  struct  any             if   typeof struct      object                  for  var variableName in struct                     this variableName    struct variableName                                     constructor                You can use it as follows in a template    lt div  local  localVariables   localVariables    a  1  b  2  c  3 2   gt      lt span gt a     local a   lt  span gt      lt span gt b     local b   lt  span gt      lt span gt c     local c   lt  span gt   lt  div gt    Of course  local can be any valid local variable name

User · Answer

If you need autocomplete support from within in your templates from the Angular Language Service   Synchronous   myVar     hello          lt ng-container  ngIf  myVar  let var   gt      var hello    lt  ng-container gt    Using async pipe   myVar    of   hello           lt ng-container  ngIf  myVar    async  let var   gt      var hello    lt  ng-container gt

User · Answer

I would suggest this  https   medium com  AustinMatherne angular-let-directive-a168d4248138  This directive allow you to write something like    lt div  ngLet   myVal  as myVar  gt     lt span gt     myVar     lt  span gt   lt  div gt

User · Answer

I am using angular 6x and I ve ended up by using below snippet  I ve a scenerio where I ve to find user from a task object  it contains array of users but I ve to pick assigned user    lt ng-container  ngTemplateOutlet  memberTemplate  context  o  getAssignee task     gt   lt  ng-container gt   lt ng-template  memberTemplate let-user  o  gt     lt ng-container  ngIf  user  gt       lt div class  d-flex flex-row-reverse  gt         lt span class  image-block  gt           lt ngx-avatar placement  left  ngbTooltip    user firstName     user lastName    class  task-assigned  value  28    src   user googleId  size  32  gt  lt  ngx-avatar gt         lt  span gt       lt  div gt     lt  ng-container gt   lt  ng-template gt

User · Answer

Ugly  but    lt div  ngFor  let a of  aVariable   gt     lt span gt   a   lt  span gt   lt  div gt    When used with async pipe    lt div  ngFor  let a of  aVariable   async   gt     lt span gt   a prop1   lt  span gt     lt span gt   a prop2   lt  span gt   lt  div gt

User · Answer

Short answer which help to someone   Template Reference variable often reference to DOM element within a  template   Also reference to angular or web component and directive  That means you can easily access the varible anywhere in a template        Declare reference variable using hash symbol    Can able to pass a variable as a parameter on an event       show lastName  HTMLInputElement       this fullName   this nameInputRef nativeElement value         lastName value      this ctx fullName   this fullName         However  you can use ViewChild decorator to reference it inside your component   import  ViewChild  ElementRef  from   angular core     Reference firstNameInput variable inside Component   ViewChild  firstNameInput   nameInputRef  ElementRef    After that  you can use this nameInputRef anywhere inside your Component   Working with ng-template   In the case of ng-template  it is a little bit different because each template has its own set of input variables     https   stackblitz com edit angular-2-template-reference-variable

User · Answer

It is much simpler  no need for anything additional  In my example I declare variable  open  and then use it        lt mat-accordion class  accord-align   open gt         lt mat-expansion-panel hideToggle  true   opened   open value true   closed   open value false  gt           lt mat-expansion-panel-header gt             lt span class  accord-title  gt Review Policy Summary lt  span gt             lt span class  spacer  gt  lt  span gt             lt a  ngIf   open value  class  f-accent  gt SHOW lt  a gt             lt a  ngIf  open value  class  f-accent  gt HIDE lt  a gt           lt  mat-expansion-panel-header gt           lt mat-divider gt  lt  mat-divider gt           lt  -- Quote Details Component -- gt           lt quote-details  quote   quote  gt  lt  quote-details gt         lt  mat-expansion-panel gt       lt  mat-accordion gt

User · Answer

Update  We can just create directive like  ngIf and call it  ngVar  ng-var directive ts   Directive       selector    ngVar       export class VarDirective      Input     set ngVar context  any        this context  implicit   this context ngVar   context      this updateView           context  any          constructor private vcRef  ViewContainerRef  private templateRef  TemplateRef lt any gt         updateView         this vcRef clear        this vcRef createEmbeddedView this templateRef  this context           with this  ngVar directive we can use the following   lt div  ngVar  false as variable  gt         lt span gt   variable   json   lt  span gt   lt  div gt    or    lt div  ngVar  false  let variable  gt       lt span gt   variable   json   lt  span gt   lt  div gt    or   lt div  ngVar  45 as variable  gt       lt span gt   variable   json   lt  span gt   lt  div gt    or    lt div  ngVar    x  4   as variable  gt       lt span gt   variable   json   lt  span gt   lt  div gt    Plunker Example Angular4 ngVar  See also   Where does Angular 4 define  quot as local-var quot  behavior for  ngIf    Original answer  Angular v4  1  div   ngIf   let   lt div  ngIf    a  1  b  2    let variable  gt     lt span gt   variable a   lt  span gt     lt span gt   variable b   lt  span gt   lt  div gt    2  div   ngIf   as  view   lt div  ngIf    a  1  b  2  c  3   x   as variable  gt     lt span gt   variable a   lt  span gt     lt span gt   variable b   lt  span gt     lt span gt   variable c   lt  span gt   lt  div gt    component ts  export class AppComponent     x   5      3  If you don t want to create wrapper like div you can use ng-container  view   lt ng-container  ngIf    a  1  b  2  c  3   x   as variable  gt     lt span gt   variable a   lt  span gt     lt span gt   variable b   lt  span gt     lt span gt   variable c   lt  span gt   lt  ng-container gt    As  Keith mentioned in comments      this will work in most cases but it is not a general solution since it   relies on variable being truthy   See update for another approach

[html] How to declare a variable in a template in Angular

Examples related to html

Examples related to angular