Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create variable in ngFor loop?

Tags:

angular

ngfor

I am trying to find out how to create a variable in an ngFor loop.

I have a loop like this:

<td *ngFor="#prod of products">   <a href="{{getBuild(branch,prod)?.url}}">     {{getBuild(branch,prod)?.status}}    </a> </td> 

You can see the the getBuild call has to be repeated multiple times. (Many more times in my actual example). I would like a way to create this variable in the template once inside the loop and simply reuse it.

Is there a way to do this?

like image 544
Allen Avatar asked Feb 07 '16 18:02

Allen


People also ask

What is even odd variables in * ngFor?

Styling odd/even rows using ngFor and ngClass – Example The value of the variable would be boolean i.e., true/false based on whether the current element's index is odd/even number. For example, in case if the element's index is odd index, then the value of the variable would be “true” otherwise it is “false“.

What does * mean in ngFor?

In *ngFor the * is a shorthand for using the new angular template syntax with a template tag, this is also called structural Directive.It is helpful to know that * is just a shorthand to explicitly defining the data bindings on a template tag. Follow this answer to receive notifications.

Is ngFor a loop?

We use the NgFor directive to loop over an array of items and create multiple elements dynamically from a template element. The template element is the element the directive is attached to.

Which is the correct syntax of ngFor in angular?

The first is *ngFor . The * is a shorthand for using the new Angular template syntax with the template tag. This is also called a structural Directive. It is helpful to know that * is just a shorthand to explicitly defining the data bindings on a template tag.

How to make a list using ng-for loop in angular?

First, you have to create an application using the command " ng serve". Then open this project and then create a component using the command " ng g component loops". Go to the .ts file and take a variable array type. and then put the few values. Then go to the HTML file and make a list. Take a list item and then put the *ng-for loop.

What is the use of NGNG-for local variable?

Ng-For - local variable Index - used to provide the index for the current element while iteration. First - return true if the current element is the last in the iteration otherwise it is false. Even - return true if current elements are even elements based on the index in the iteration otherwise false.

How do you use ngfor in an array?

The ngFor directive does create the HTML-Element it is placed in as many times as there are elements in the array. So to create a list-element for each array element, we place the ngFor directive inside of the li tag.

What is NG for loop in HTML?

ng-for loop The ng-for loop is a structural directive. We will see how to change the structure of the dom. Point is to repeat given HTML ones for each value in an array [].


1 Answers

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, ngFor 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> 
like image 84
Thierry Templier Avatar answered Sep 24 '22 22:09

Thierry Templier