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

Which preferences do I need, to get angular2 worked with Visual Studio 2013?
ng-bootstrap Datepicker current date like placeholder
ng2-tag-input separatorKeys not working
Parser Error: Got interpolation ({{}}) where expression was expected
Angular 2 - test for change in route params
Angular 2 RxJS Observable not loading
Angular 2 - dynamic “for” attribute in ngFor [duplicate]
Ionic 2 / Angular 2 providers cannot be resolved
Call a function on click event in Angular 2
How to register a dynamically added custom component as a form control within a formgroup
Angular 2 Cli setup
what´s the meaning of (<any>window).__karma__
How to get component in service
Is there any way to get the underlying control from the valueChanges in Angular 2
Using plugins for d3 in angular2
How to use router-outlet from lazy loaded children module inside primary router-outlet

Categories

HOME
coldfusion
google-maps
arduino
phpunit
cron
firebase-authentication
automation
local-storage
jupyter-notebook
ignite
text
dfa
linux-device-driver
unity5
geogebra
jaxb
graphviz
vbulletin
fontforge
stormcrawler
face-recognition
mupdf
tablesorter
drupal-modules
jquery-gmap3
pentaho-spoon
recurly
odbc
4d-database
httpsession
firebase-cloud-messaging
osx-elcapitan
xbuild
pfsense
btrfs
indexof
sandbox
ply
chinese-locale
fxml
mahapps.metro
spacing
android-ffmpeg
android-adapter
citations
ektron
data-processing
xc8
nsfontpanel
invoke
object-oriented-analysis
django-compressor
db-schema
sqlcommand
hasownproperty
spring-social-facebook
unite.vim
gio
mediafire
ntfs-3g
splash-screen
dfdl
ng-template
httpful
johnny-five
pdl
hottowel
apache-commons
du
kirby
ncbi
allocation
resin
centura
filefield
swift-protocols
tokumx
workbench
duplicate-removal
commission-junction
facebook-app-center
c++builder-6
mindmap
wsimport
jsonexception
django-staticfiles
readelf
mercurial-subrepos
camping
ctime
viewstack
contentflow
mobile-phones
wind-river-workbench
log5j
silverlight-embedded
fql.multiquery
maintaining-code

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