angular


Angular 2, ngFor create a new context for each iteration?


Everyone!
In Angular 2, *ngFor create a new context for each iteration? like ng-repeat in angular js?. I need to change a variable value inside *ngFor, but that value change for all iterations. Example:
<div *ngFor="let label of labels">
<div class="company"><a (click)="isCollapsed = !isCollapsed;isCollapsed ? labelStyle = {color: 'gray'}:labelStyle = {color: '#337ab7'}" [ngStyle]="labelStyle">{{label}}</a>
</div>
<div [ngbCollapse]="isCollapsed">
<div class="item" *ngFor="let product of products">
<div class="meta" *ngIf="product.year == label">
<div class="details">
<div [innerHTML]=product.reference></div>
</div>
</div>
</div>
</div>
</div>
When I do click on a label, isCollapsed change from false to true, but isCollpsed change for all iterations. Could you give me an advice for doing click and collapsing only one label?
Thanks
add isCollapsed as a property of class used by labels.
In your component, if your 'labels' is a number array, i.e. if it is currently:
labels: number[]
then change it to
labels: MyLabel[]
and after your component class add a model called MyLabel like:
class MyLabel{
constructor(public year: number, public isCollapsed: boolean){}
}
And then in the html you could use it like:
<div *ngFor="let label of labels">
<div class="company"><a (click)="label.isCollapsed = !isCollapsed labelStyle = {color: 'gray'}:labelStyle = {color: '#337ab7'}" [ngStyle]="labelStyle">{{label.year}}</a>
</div>
<div [ngbCollapse]="label.isCollapsed">
<div class="item" *ngFor="let product of products">
<div class="meta" *ngIf="product.year === label.year">
<div class="details">
<div [innerHTML]=product.reference></div>
</div>
</div>
</div>
</div>
You can define one field in component with index name and set it to null and using $index like this:
<div class="company"><a (click)="toggleCollapsed($index) ? labelStyle = {color: 'gray'}:labelStyle = {color: '#337ab7'}" [ngStyle]="labelStyle">{{label.year}}</a>
And define toggleCollapsed(index) as follow:
toggleCollapsed(index : number){
this.index != index ? this.index = index : this.index = null;
return this.index == index;
}

Related Links

Angular 2 MVW - MVC, MVA, MVP, MVVM?
Confirm dialog inject it or hide it (performance)
Angular 2 - load component from its own file, instead of on the module file
ng2-eonasdan-datetimepicker ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator'
Restrict access to ViewChild methods
Can I have a generic method in a injectable class?
Open alert dialog box after clicking on button in Angular2
Null coalescing operator angular 2
Angular2/Ionic2 where to define global variables?
Fontawesome folder is very big for my project
Populating table using 2 different *ngFor
How to serve assets with the webpack 2 dev server
Chrome extension + angular-cli : Content from built doesn't scroll
Angular2 refresh page after passing object to component
angular2 ngBusy backdrop doesnt work
Angular img loading directive

Categories

HOME
docker
loadrunner
ruby-on-rails-4
modularity
microsoft-cognitive
userform
linux-device-driver
import
servicestack
post
cordova-plugins
aurelia-router
fluent-assertions
mit-scratch
double
libreoffice-base
emu8086
postgresql-9.0
dht
selenium-rc
robocopy
google-surveys
indexoutofrangeexception
http-caching
vowpalwabbit
android-logcat
pi4j
protobuf-c
jquery-ui-autocomplete
ipc
grunt-connect-proxy
hashcode
responsive-filemanager
sqlcmd
interactive
actor
model-driven
reddit
laravel-excel
html.dropdownlistfor
virsh
tinyxml2
volume-rendering
rpath
motorola
htsql
markov-models
timedelta
pxe
user-mode-linux
into-outfile
sos
sonarqube-5.4
traceroute
javascript-globalize
hottowel
tess-two
html5builder
typescript1.7
protractor-net
akeneo
uiactivity
apache-roller
resin
zooming
mysql-num-rows
stackato
resharper-plugins
deface
restriction
n-tier
graphael
google-email-settings-api
inference
rs485
apprequests
iunknown
hyperterminal
mercurial-subrepos
timezoneoffset
iphone-4
osx-gatekeeper
nsformatter
google-doodle
visualtreehelper
spaces
juggernaut
equivalent
showmodaldialog
abbreviation
vmwaretasks
zero-pad

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App