Local Variable in Template: Angular 2

[Apurv Singhal]

How do I set local variables inside html templates?

<span #myVar="myVal"></span> gives an error

*ngFor lets you set a local variable using let but that is only for arrays.

[Ben Nadel]

I believe you have to use

let-myVar="myVal"

#var is only for actual element/component references in recent version.

Cheers,

Ben

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Ben Nadel
Lover of JavaScript
http://www.bennadel.com

[Apurv Singhal]

Hi, 

Thanks for the reply.

I tried let-myVar, it doesn't work, gives parsing error.

[Apurv Singhal]

Here is the error:

"let-" is only supported on template elements. ("

[Ben Nadel]

Where is "myVal" coming from?

[Apurv Singhal]

<li *ngFor="let x of y">

    <span #myVar="myObj.getZ(x)"></span>

</li>

[Tyler Garland]

Hey Ben,

For component references like #email="ngModel", is there any way to dynamically name #email? I have a lot of boilerplate creating inputs, divs for error messages for each control and I'm thinking just making a component with a passed in name would reduce complexity. Any ideas?

[Sander Elias]

Hi Apurv.

The #xxx assigns the element that it is on to a local variable. That means it is already an assignment, and you can't reassign it. Setting local variables is (for now) prohibited in template syntax.

That does not mean you are out of luck. However keep in mind that this is a bad practice, and should be used with extreme care. (the downside is hard to maintain and tightly coupled code!) You are better off creating a new component that takes the value as an parameter, and handles it from there.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `

  <li *ngFor="let x of y">

    <span #myVar>{{x}}-{{read(x,myVar)}} {{myVar|json}}</span>
  </li>
  `
})
export class AppComponent {
  y = [1,2,3];
  read(x,ref) {
    console.log(ref)
    ref.value = +x*2
    return +x*2;
  }  
}

working in plunk

This works because the myVar is actually an object (to be precise, it's a direct reference to the <span> element in the DOM) , and as in JS objects are passed by reference, you can add/modify any proerty you like in your controllers function.

Hope this clarifies it a bit,

regards

Sander

[waxmiguel]

thanks

On 07/07/2016, Sander Elias <sande...@gmail.com> wrote:
> Hi Apurv.
>
> The #xxx assigns the element that it is on to a local variable. That means
> it is already an assignment, and you can't reassign it. Setting local
> variables is (for now) prohibited in template syntax.
> That does not mean you are out of luck. However keep in mind that this is a
>
> bad practice, and should be used with extreme care. (the downside is hard
> to maintain and tightly coupled code!) You are better off creating a new
> component that takes the value as an parameter, and handles it from there.
>
> import { Component } from '@angular/core';
>
> @Component({
> selector: 'my-app',
> template: `
> <li *ngFor="let x of y">
> <span #myVar>{{x}}-{{read(x,myVar)}} {{myVar|json}}</span>
> </li>
> `
> })
> export class AppComponent {
> y = [1,2,3];
> read(x,ref) {
> console.log(ref)
> ref.value = +x*2
> return +x*2;
> }
> }
>

> working in plunk <http://plnkr.co/edit/jmZkzqxsAi55LsTCvTkV?p=preview>

>
> This works because the myVar is actually an object (to be precise, it's a
> direct reference to the <span> element in the DOM) , and as in JS objects
> are passed by reference, you can add/modify any proerty you like in your
> controllers function.
>
> Hope this clarifies it a bit,
> regards
> Sander
>

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to angular+u...@googlegroups.com.
> To post to this group, send email to ang...@googlegroups.com.
> Visit this group at https://groups.google.com/group/angular.
> For more options, visit https://groups.google.com/d/optout.
>


--

waxmi...@gmail.com
waxm...@mail.ru
waxm...@bitrix24.com
0xC840F256B0F0FF9069E918d060063057AAaA6b36