angular


*ngIf condition is not fired/doesn't update template in ngOnChanges


I have a child a component that does not fire the condition for *ngIf
child component:
export class child {
#Input() user;
#Input() list;
listLength: number;
showBtn: boolean = false;
constructor(){}
ngOnChanges(changes: SimpleChanges){
this.userId = this.user.id;
this.userList = this.list;
this.listLength = this.userList.length; // this updates everytime when changes happen on another component thats pushed from this component.
if (this.listLength > 3){ // this doesn't fire until I refresh the page
this.showBtn = true;
}
You probably also get an error output in the browsers console.
Invoke change detection explicitly if you update the model in ngOnChanges()
constructor(private cdRef:ChangeDetectorRef){}
ngOnChanges(changes: SimpleChanges){
this.userId = this.user.id;
this.userList = this.list;
this.listLength = this.userList.length; // this updates everytime when changes happen on another component thats pushed from this component.
if (this.listLength > 3){ // this doesn't fire until I refresh the page
this.showBtn = true;
}
this.cdRef.detectChanges();
}
}

Related Links

Angular 2 not showing correctly values in input
Webpack resolve.modulesDirectories doesn't seem to work
Text editors in angular2
Where can i find the latest ionic-angular2 version in a plunker that uses #Ngmodule?
How to manually lazy load a module?
Angular2 Prevent route change if any changes made in the view
Angular2 pass data from component to root component, without child component
Angular 2 $this.parent().next().show() on click
Having difficulty setting up Asp.net(Framework) project with typescript
ngModel not showing data when using promises
How can I share route structure for many components
Angular2-router: How to only change a parameter of a route?
How to use observable in ngFor (async pipe) when the element is hidden in Angular2
SystemJS configuration to remove the check for index.js
Can't resolve all parameters for StateService
angular2 input not self close

Categories

HOME
c++
linux-kernel
hyper-v
java-ee
drawing
graphite
migration
appium
set
bootstrap-datepicker
pstricks
directshow
servo
visio
strongloop
ascii
junit4
tablesorter
pixel
biopython
eventtrigger
recurly
zillow
google-nativeclient
mitmproxy
mdm
google-developers-console
virtuoso
avaya
messagebox
chinese-locale
side-effects
jquery-chosen
grunt-connect-proxy
neoscms
lsmeans
opensaml
handbrake
lightgallery
initializing
war
ngrx-effects
maximo-anywhere
mapped-drive
background-position
enterprise-library-6
wso2-appm
orders
release-management
libtool
azure-webjobssdk
dbx
jwrapper
syncsort-dmx-h
twebbrowser
unicorn
mapfragment
nsthread
agile-project-management
xlconnect
numerical-analysis
idfa
openoffice-writer
reducers
grid-layout
phpinfo
cts
xcode4
mongoose-web-server
yard
nameerror
angular-ui-tree
objdump
android-context
mpmediapickercontroller
html5-template
cloudcontrol
dynamicquery
resin
rgs
ews-managed-api
ember-testing
sql-job
tokumx
sharepoint-clientobject
pixate
kif-framework
firstdata
raii
svggraph
complete.ly
apiaxle
commission-junction
nsfontmanager
apprequests
hiding
server-side-scripting
jquery-textext
trusted-timestamp
shadowbox
contentflow
twisted.internet
memory-profiling
testdriven.net
assetslibrary
looper
log5j
layar
set-include-path
whiteboard

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