Create Html local variable programmatically with Angular2

Question

I need to know if there is a way to create HTML local variables programmatically.

I am developing a web app where I have an NgFor loop and I want to be able to assign a local variable to each sub element created by the NgFor.

ie :

<div *ngFor="#elt of eltList" >
    <span #setLocalVariable(elt.title)></span>
</div>

setLocalVariable(_title : string){
    let var = do some stuff to _title;
    return var;
}

The exemple above shows you what I am trying to accomplish and obviously does not work. Is there a way to achieve this ?

Thank you in advance.

Edit:

After seeing the answers I got (and i thank everyone who took the time to read my question and tried to answer it) i'll explain a bit more why i want it that way.

I will be using : loadIntoLocation() from the DynamicComponentLoader. That function got as a 3rd parameter a string that refers to an anchors (ie : #test in an html element). Thats why i need to create those local variables with a name equal to the one of my elt.title.

Why does it have to be a local variable? Why not just setting an attribute? `elt.title` seems to be a string anyway. — Günter Zöchbauer, Jan 19 '16 at 13:25
It needs to be a local variable because I will be using that in the loadIntoLocation() function of the DynamicComponentLoader and if i understood correctly the 3rd argument of that function it is a string that refers to an anchor "#something" of my HTML Element. — David Gonzalez, Jan 19 '16 at 13:34
`loadNextToLocation` only needs an `ElementRef` if this helps. I don't know if creating such variables is actually possible and I'm also curious if it is. — Günter Zöchbauer, Jan 19 '16 at 13:35
I'll try using loadNextToLocation but we'll wait to see if what i want to achieve is possible. Thank you for your help. — David Gonzalez, Jan 19 '16 at 13:43

score 4 · Answer 1 · edited Apr 13 '18 at 15:18

I think local variables (defined with the # character) don't apply for your use case.

In fact, when you define a local variable on an HTML element it corresponds to the component if any. When there is no component on the element, the variable refers to the element itself.

Specifying a value for a local variable allows you to select a specific directive associated with the current element. For example:

<input #name="ngForm" ngControl="name" [(ngModel)]="company.name"/>

will set the instance of the ngForm directive associated with the current in the name variable.

So local variables don't target what you want, i.e. setting a value created for the current element of a loop.

If you try to do something like that:

<div *ngFor="#elt of eltList" >
  <span #localVariable="elt.title"></span>
  {{localVariable}}
</div>

You will have this following error:

Error: Template parse errors:
There is no directive with "exportAs" set to "elt.title" ("
  <div *ngFor="#elt of eltList" >
    <span [ERROR ->]#localVariable="elt.title"></span>
    {{localVariable}}
  </div>
"): AppComponent@2:10

Angular2 actually looks for a directive matching the provided name elt.title here)... See this plunkr to reproduce the error: https://plnkr.co/edit/qcMGr9FS7yQD8LbX18uY?p=preview

See this link: http://victorsavkin.com/post/119943127151/angular-2-template-syntax, section "Local variables" for more details.

In addition to the current element of the iteration, ngForm only provides a set of exported values that can be aliased to local variables: index, last, even and odd.

See this link: https://angular.io/docs/ts/latest/api/common/NgFor-directive.html

What you could do is to create a sub component to display elements in the loop. It will accept the current element as parameter and create your "local variable" as attribute of the component. You will be able then to use this attribute in the template of the component so it will be created once per element in the loop. Here is a sample:

@Component({
  selector: 'elt',
  template: `
    <div>{{attr}}</div>
  `
})
export class ElementComponent {
  @Input() element;

  constructor() {
    // Your old "localVariable"
    this.attr = createAttribute(element.title);
  }

  createAttribute(_title:string) {
    // Do some processing
    return somethingFromTitle;
  }
}

and the way to use it:

<div *ngFor="#elt of eltList" >
  <elt [element]="elt"></elt>
</div>

Edit

After your comment, I think that you try the approach described in this answer. Here are more details: create dynamic anchorName/Components with ComponentResolver and ngFor in Angular2.

Hope it helps you, Thierry

Well thank you for the time you spent on my question. But i never said i wanted to assign something to my local variable doing something like "#localVariable="elt.tiltle"" what i need to do is declare a local variable wich name is equal to elt.title. If elt.title = "test1" i want my local variable to be "#test1" and of course refer to the element. Please refer to my edit to see why i need it that way why i need to do that. — David Gonzalez, Jan 19 '16 at 14:06
Okay see better now what you try to do ;-) Thanks for additional hints! — Thierry Templier, Jan 19 '16 at 14:16
I added my answer for a potential solution. I'm still working on a corresponding plunkr... — Thierry Templier, Jan 19 '16 at 17:02
Yes i am trying to do something similar to the link you included in your answer. Thank you for pointing out this stackoverflow question. I appreciate your help. — David Gonzalez, Jan 20 '16 at 09:32

score 0 · Answer 2 · answered Jan 19 '16 at 13:45

You could stick it into the template interpolation since it handles expressions.

<div *ngFor="#elt of eltList" >
    <span>{{setLocalVariable(#elt)}}</span>
</div>

setLocalVariable(_title : string){
    let var = do some stuff to _title;
    return var;
}

Create Html local variable programmatically with Angular2

2 Answers2

Linked