You can use @ViewChildren for that purpose @Component({ selector: ‘my-app’, template: ` <ul *ngIf=”!isHidden”> <li #allTheseThings *ngFor=”let i of items; let last = last”>{{i}}</li> </ul> <br> <button (click)=”items.push(‘another’)”>Add Another</button> <button (click)=”isHidden = !isHidden”>{{isHidden ? ‘Show’ : ‘Hide’}}</button> `, }) export class App { items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]; … Read more
Inside the ngFor you have access to several variables: index: number: The index of the current item in the iterable. first: boolean: True when the item is the first item in the iterable. last: boolean: True when the item is the last item in the iterable. even: boolean: True when the item has an even … Read more
Maybe the simplest solution without any TS code: <div *ngFor=”let item of [].constructor(10); let i = index”> {{i}} </div>
TL;DR Use ViewChildren instead of ViewChild As @Commerical Suicide mentioned you cannot set the references dynamically. The #div is called template reference variable. You can access your divs via ViewChildren in you *.ts file. Sample: @ViewChildren(‘div’) divs: QueryList<ElementRef> Then you can call multiple methods on your new QueryList, like forEach or find.
This should work <option *ngFor=”let title of titleArray” [value]=”title.Value” [attr.selected]=”passenger.Title==title.Text ? true : null”> {{title.Text}} </option> I’m not sure the attr. part is necessary.
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 … Read more
As pointed out in @Eric comment, and after lots of reading and playing around, here is how to use trackBy in angular2 the first thing you need to know its not same syntax as angular1, now you need to separate it from the for loop with a ;. Usage 1: Track by property of object … Read more
Angular 2, 4 and Angular 5 compatible! You have provided so few details, so I’ll try to answer your question without them. You can use Interpolation: <img src={{imagePath}} /> Or you can use a template expression: <img [src]=”imagePath” /> In a ngFor loop it might look like this: <div *ngFor=”let student of students”> <img src={{student.ImagePath}} … Read more
ngFor and ngForOf are not two distinct things – they are actually the selectors of the NgForOf directive. If you examine the source, you’ll see that the NgForOf directive has as its selector: [ngFor][ngForOf] , meaning that both attributes need to be present on an element for the directive to ‘activate’ so to speak. When … Read more
Your extractData (and possibly also your HTTP API) is returning an object {} – ngFor requires an array [] to iterate. Change your service/API to produce an array, or transform the object in your component.