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

Angular2 add nativeElement to component's prototype
Property 'value' does not exist on type 'ElementRef'
Getting all routes from current module - Angular 2
Ionic 2 Cache issue with tabs application
Set selected option by default on angular template
Downloading Redux State into an Angular 2 component and then iterating over its result
How to push on FormArray without FormBuilder on Angular 2
Angular 2, Uncaught Type Error: Cannot read property 'Injectable' of undefined
Set width to an Angular2-modal window
identityserver4 angular client, from where come the call to this endpoint
Angular2 translation after subscribing to service
Kendo UI - Texfield not showing in MultiSelect when Value is 0
InvalidPipeArgument for pipe 'DatePipe'
Native Element in angular 2
Module Communication between Product Module and User Module
How do I use login session in angular2 (local storage) with php backend

Categories

HOME
react-native
linux-kernel
hyper-v
gnuplot
gradle
slickgrid
firmware
appium
uitableview
cakephp-3.0
speech-recognition
google-cloud-kms
mips32
graphviz
ios8
quandl
apache-spark-2.0
gemfire
memcached
protege
osticket
crc32
vbulletin
android-toast
outlook-redemption
benchmarking
shogun
conv-neural-network
adodb-php
sensenet
react-boilerplate
divide-and-conquer
boto
cookie-session
powerpoint-vba
structured-data
chinese-locale
povray
ipc
choropleth
vim-syntax-highlighting
infowindow
uisegmentedcontrol
sequences
uwamp
angularjs-ng-model
webex
mapped-drive
android-device-monitor
lighttable
spectral-density
webpack-style-loader
smartmeter
unicode-string
sift
topshelf
shodan
bubble-sort
cscope
banking
siteminder
voxel
leap-motion
dbx
raptor
virtual-directory
highcharts-ng
stage3d
gridster
pdl
fody-propertychanged
wordpress-4.5
foundation
django-pipeline
nstablecolumn
determinants
pig-udf
dynamicquery
compiler-options
enplug-sdk
jquery-dropkick
navigationbar
typescript1.4
textile
kooboo
basic-msi
cxf-client
firstdata
graphael
interlacing
countries
mapstraction
tiles2
mib
remotipart
xadisk
windmill
nexus-7
git-add
system-design
scopes
endl
kiln
single-user
raw-ethernet
test-environments
clean-language
microsoft.build
remote-administration

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile