Stack Overflow
Stack Overflow

Questions tagged [ngfor]

The Angular NgFor directive instantiates a template once per item from an iterable.

In Angular, the NgFor directive instantiates a template once per item from an iterable. The context for each instantiated template inherits from the outer context with the given loop variable set to the current item from the iterable.

2404 questions
889
votes
10 answers

ngFor with index as value in attribute

I have a simple ngFor loop which also keeps track of the current index. I want to store that index value in an attribute so I can print it. But I can't figure out how this works. I basically have this:
635
votes
18 answers

*ngIf and *ngFor on same element causing error

I'm having a problem with trying to use Angular's *ngFor and *ngIf on the same element. When trying to loop through the collection in the *ngFor, the collection is seen as null and consequently fails when trying to access its properties in the…
garethdn
  • 12,022
  • 11
  • 49
  • 83
356
votes
17 answers

Exception: Can't bind to 'ngFor' since it isn't a known native property

What am I doing wrong? import {bootstrap, Component} from 'angular2/angular2' @Component({ selector: 'conf-talks', template: `
{{talk.title}} by {{talk.speaker}}

{{talk.description}}

` }) class…
Mark Rajcok
  • 362,217
  • 114
  • 495
  • 492
167
votes
8 answers

How to use `trackBy` with `ngFor`

I can't really understand what I should return from trackBy. Based on some examples I've seen on the web, I should return the value of some property on the object. Is it right? Why should I get index as a parameter? For example, in the following…
Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488
70
votes
3 answers

Angular2 Dynamic input field lose focus when input changes

I'm making a dynamic form. A Field has a list of values. Each value is represented by a string. export class Field{ name: string; values: string[] = []; fieldType: string; constructor(fieldType: string) {this.fieldType =…
Elbbard
  • 2,064
  • 6
  • 30
  • 53
67
votes
5 answers

What is the difference between [ngFor] and [ngForOf] in angular2?

As per my understanding, Both are doing the same functions. But, ngFor would be works like as collections?. ngForOf would be works like as generics?. Is my understanding is correct? or Could you please share more difference's(details) about…
Ramesh Rajendran
  • 37,412
  • 45
  • 153
  • 234
63
votes
4 answers

Error trying to diff '[object Object]' in Angular

Looks like something wrong with freight variable in HTML: Error in app/freightList.component.html:13:8 Error trying to diff '[object Object]' Below is code freight.service.ts ======================= getFreight (): Promise { …
sourabh kumar
  • 671
  • 1
  • 5
  • 9
60
votes
4 answers

how to bind img src in angular 2 in ngFor?

In my project I am getting data: image src, student name and student id. I bind student name and student id. How to bind image src in angular 2 ?
paruvelly Vishwanath
  • 1,202
  • 3
  • 14
  • 30
58
votes
5 answers

how to use track by inside ngFor angular 2

tried every syntax i can guess couldnt make it works ! {{post|json}}
Zalaboza
  • 8,899
  • 16
  • 77
  • 142
58
votes
8 answers

How to create variable in ngFor loop?

I am trying to find out how to create a variable in an ngFor loop. I have a loop like this: {{getBuild(branch,prod)?.status}} You can see the the getBuild…
Allen
  • 3,134
  • 5
  • 29
  • 49
54
votes
3 answers

angular viewChild for dynamic elements inside ngFor

My template has something like this:
is there a way for me to name each div differently using the #? And if so, how can I access them later in my TS file? by the way, what are these #…
Gustavo Berwanger
  • 684
  • 1
  • 5
  • 9
53
votes
2 answers

Angular2 *ngFor in select list, set active based on string from object

I'm trying using the ngFor on my select DropDownList. Have loaded in the options which should be in the dropdown. The code you see here:

Mikkel
  • 1,771
  • 11
  • 35
  • 59
50
votes
9 answers

angular: how to loop for numbers?

I have a collection of items, where each item have a rank attribute, which is a number. I wan to loop over this number, here is what I've tried:
…
Mohammad
  • 3,449
  • 6
  • 48
  • 75
45
votes
2 answers

Angular io (4) *ngFor first and last

I am trying to tell whether an item in an *ngFor is the first or last element to style a container. Is there a way to do something like this? …
Nicholas Fitton
  • 573
  • 1
  • 4
  • 10
40
votes
8 answers

Angular 2: Callback when ngFor has finished

In Angular 1 I have written a custom directive ("repeater-ready") to use with ng-repeat to invoke a callback method when the iteration has been completed: if ($scope.$last === true) { $timeout(() => { …
Tobias Punke
  • 730
  • 1
  • 7
  • 15
1
2 3
…
99 100