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 material 2 dynamic button toggle group form control accessor
Debug Tests in NG Test
Angular 2. Doubled custom tags
Integration Stripe Elements with angular 2
How to format phone number while typing in angular 2?
Angular: Wrap providers in a module?
Angular - getting the handle to the ng-content component in the parent
How to use ng.material.MdDialog in ES5?
Access to a variable through all the components Angular2
Trouble with Microsoft Edge, Protractor and Jasmine
Error: XHR error (404 Not Found) in Angular2 application
do I have to create custom value accessors to use buttons as form controls in angular 2?
Angular 2 datatable with keyboard support
Karma can't find my tests in my angular-cli app
How to add cordova contact module in ionic 3 app.js
How do I send local notifcation in Ionic 3?

Categories

HOME
audio
phpunit
momentjs
multidimensional-array
kotlin
modularity
unity5
64bit
wayland
external
strongswan
flannel
android-toast
lokijs
corba
redactor
systemml
markup
uidocumentinteraction
httpsession
libcurl
selenium-rc
boto
xfce
xbuild
oracle-data-integrator
floyd-warshall
mahapps.metro
ipc
webm
reactive-streams
nsdate
oracle-data-modeler
xfs
pivottable.js
devexpress-wpf
fluent-nhibernate
gemfile
libphonenumber
evosuite
allegro5
wamp-protocol
case-class
topshelf
prime-factoring
xml-rpc
google-keep
sqlcommand
collaborative-filtering
asana-connect
jwrapper
z-order
syncsort-dmx-h
dde
mapfragment
eclipse-indigo
unreal-blueprint
togglz
backspace
max-heap
7digital
wordpress-4.5
savefiledialog
.a
mongojs
enplug-sdk
vin
sequel
chap-links-library
function-prototypes
mooc
facade
jekyll-extensions
resharper-plugins
android-handlerthread
controltemplate
kif-framework
nsurlprotocol
opendocument
countries
mapstraction
commission-junction
inter-process-communicat
stackmob
cvxopt
jquery-ui-selectable
opengl-es-1.1
cgimagesource
ipad-2
grit
objectiveflickr
incompatibletypeerror
scopes
codeigniter-datamapper
web-setup-project
equivalent
iphone-sdk-4.1
tao
widechar
language-theory
loose-coupling
xla
maintenance-plan
nice

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile