ngfor

Let's say we have an array of items: items = [ { title: 'item 1'}, { title: 'item 2'}, /* ... */ ]; And there is a template that renders this array: <ul> <li *ngFor="let item of items">{{item.title}}</li> </ul> Wll angular2 rerender the whole array if I add/remove items via push / splice or will it only add/remove the markup for the corresponding items? If it does updates only, then is there any difference in mutation stategies -- should I prefer push/splice over array replacing? In other words, are these two approaches equivalent in term of rendering performance: /* 1: mutation */ this.items

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 ? 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}} /> </div> Angular 2.x to 8 Compatible! You can directly give the source property of the current

I have a simple ngFor that loops through an array. However, I've added a condition that while the index is < 5 keep add the tag. and After that, I want to add an extra tag just once that will be used a dropdown to view the rest of the tags. But it doesn't work. <li *ngFor="let tag of module.Tags; let i = index"> <a *ngIf="i<5" href="#" class="span-tag tag">{{ tag }}</a> <div *ngIf="module.Tags.length > 5 && i == 6">DropDown Button</div> </li> The feature here is that I don't want to show unlimited number of tags to the user, I want to limit it to only 5 tags, and have a button after 5 tags

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 ngFor and ngForOf ? 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 you use *ngFor

I want to display a dataList. Some values are calculate from a function. It seems angular2 calls the calculate function many times. <tr *ngFor="let data of dataList"> <td>{{ data.no }}</td> <td>{{ data.name }}</td> <td>{{ calculateFunction(data.price) }}</td> </tr> Console will output "calculate..." many times, more than dataList.length. calculateFunction() { console.log('calculate...'); return ...; } Should I worry about that for performance or just let angular2 do this? The caculateFunction(data.price) function will be called every time Angular runs change detection for the component (more

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? 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

I can't really understand what I should return from trackBy . Based on examples I've seen on the web, I should return the value of some property on the object. Is it correct? Why do I get index as a parameter? For example, in the following case: constructor() { window.setInterval(() => this.users = [ {name: 'user1', score: Math.random()}, {name: 'user2', score: Math.random()}], 1000); } userByName(index, user) { return user.name; } ... <div *ngFor="let user of users; trackBy:userByName">{{user.name}} -> {{user.score}}</div> The objects shown in template are still updated despite the name being