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

Answer 1

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:

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:

  
  {{localVariable}}

You will have this following error:

Error: Template parse errors:
There is no directive with "exportAs" set to "elt.title" ("
  

    ]#localVariable="elt.title">
    {{localVariable}}
  
"): 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: `
    
{{attr}}
  `
})
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:

---

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