You could do something like this: <li *ngFor=”let o of obj”> <p *ngFor=”let objArrayElement of generateArray(o)”> {{objArrayElement}} </p> </li> where generateArray looks like: generateArray(obj){ return Object.keys(obj).map((key)=>{ return obj[key]}); }
All you need is to use [ngTemplateOutletContext] Read More Here is the way how you can achieve that : <div> <h3>All Templates</h3> <ul *ngFor=”let number of numbers”> <ng-container [ngTemplateOutlet]=’number % 2 == 0 ? even_tpl : odd_tpl’ [ngTemplateOutletContext]=”{number:number}”></ng-container> </ul> </div> <ng-template #odd_tpl let-number=”number”> <li>Odd: {{number}}</li> </ng-template> <ng-template #even_tpl let-number=”number”> <li>Even: {{number}}</li> </ng-template> WORKING DEMO
You can use {{ ‘wave’ + i }} instead of wave{{i}}. Make it as Angular Experession. This is the full ngFor: <li *ngFor=”let episode of episodes; let i = index”> <div id=”{{ ‘wave’ + i }}”></div> </li> It works and creates the div with the correct id document.getElementById(“wave1″) Output will be like this: <div id=”wave1”>wave1</div> … Read more
This is just Angular2 change detection at work calling loadProperty(i,element) over and over in each change detection cycle. Calling methods from the template is discouraged because they are called very often. You should instead store the result in a property and bind to this property instead.
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
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.
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>
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