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

how do I merge the values of the child components of angular2 into reactive form object?
Angular2 multiple components different imports
Update an array with new objects
Dropbox service with popup
Sending Emails Using TinyMce- Angular 2
Nested form tags in angular 2
Toggle Value in Angular Material CheckBox
Angular2 cli error cannot resolve #angular animations from primeng2 components
ionic2 AlertController, how to return the buttons clicked value from method
Cannot read property 'stateChangeExpr' of null at _parseAnimationStateTransition
Angular2 : not able to install xml2json
Ionic 3 - Supplied parameters do not match any signature of call target
Angular2/Rxjs HTTP Catch Asynchronous Transform Issue
Angular2 get if router has canActivate()
Kendo Angular2 npm from build server?
Angular2 material npm dependencies

Categories

HOME
menu
logic
openerp
sails.js
selenium-webdriver
umbraco7
uitableview
chart.js
mutex
http-headers
amazon-sqs
uinavigationcontroller
crystal-reports-xi
apostrophe-cms
shoutem
restcomm
spring-aop
smt
skybot
4d-database
bind
selenium-rc
polymer-1.0
image-comparison
stackdriver
gun
swtbot
qtspim
ssrs-2016
xfce
indexof
sandbox
rubinius
navigation-drawer
maxlength
choropleth
sqlcedatareader
pam
magnolia
tornado-motor
asn.1
direct3d9
toml
data-compression
fixture
scalacheck
burn
mosync
xquery-sql
matlab-uitable
sp-executesql
invoke
webrole
jsdoc3
icingaweb2
hasownproperty
spring-social-facebook
vibration
report-viewer2012
git-stash
nested-attributes
qtquick2
rouge
orchardcms-1.9
django-class-based-views
simplify
anonymity
http-accept-header
network-monitoring
euclidean-distance
excel-2008
utilities
cordova-chrome-app
cloudcontrol
lastaccesstime
pig-udf
hashbytes
compiler-options
android-view
zenoss
file-attributes
subsonic2.2
control-center
bonsaijs
maptiler
graphael
freetextbox
resharper-7.1
pivotitem
facebook-app-center
ubuntu-13.04
firepad
xadisk
jquery-ui-selectable
aspnet-regiis.exe
server-side-scripting
opengl-es-1.1
jquery-mobile-collapsible
timezoneoffset
google-ad-manager
xmlnodelist
entityreference
nsenumerator
widechar
application-design
moss2007enterprisesearch
pvcs
flashlite

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile