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

How to follow RxJS functionnal programming for Angular 4
FIrebase using ionic 2
Accessing the component's values when using `<ng-content>`
How to structure app with classes for objects retrieved with AngularFire2
Best Practise for Observables used in an Angular 2 Data Service
Access a global variable located in the head of Index file within Angular2 component?
passing multiple params in route angular 4
Angular2 trying to get item in an array before array is populated
Find record through HorizonIO in RethinkDB not returning result
How to display json object parameters in angular 2 template typescript
ZoneAwareError when running agular2 application in safari
I want to bind the legend option with checkbox(show legend or not)
How to get value from asynchronous local storage function and pass it to modal ionic 2
Syntax highlighting in Angular 2
angular2-cli cannot load style error
Angular2/Rxjs: 'catch' on observable giving ProgressEvent instead of json from response

Categories

HOME
node.js
masonry
owasp
analytics
scenekit
get
chart.js
metal
webserver
aurelia-router
apache-apex
tensorboard
rectangles
boost-intrusive
dynamics-ax-2012
row-number
video-processing
codecvt
watchkit
amazon-route53
biopython
sdl
beatbox
react-boilerplate
raycasting
packet-capture
xmlstarlet
premailer
fork
google-cloud-vision
miktex
powerpoint-vba
amazon-lightsail
sandbox
ply
graphic
android-sensors
week-number
cad
cloudfoundry-uaa
gmail-contextual-gadgets
gsutil
direct3d9
thinktecture-ident-model
dos
leanft
powerdesigner
webdrivermanager-java
oracle-ebs
model-driven
singleton-type
multibox
trace
ssas-tabular
burn
zlib
cakephp-3.3
tinyxml2
android-datepicker
wso2dss
webpack-style-loader
knockout-validation
prime-factoring
maven-resources-plugin
google-keep
powerview
outlook-2016
vibration
launch-agent
windows-firewall-api
swig-template
eclipse-indigo
tizen-sdb
snap-lang
highcharts-ng
android-6.0.1
stage3d
tablecellrenderer
angular-ui-tree
xcode-bots
gstat
kermit
ttml
allocation
zenoss
uploadifive
opencv-features2d
jml
code-metrics
sandbox-solution
bitmapimage
updatemodel
usermode
resharper-7.1
dynamic-html
node-http-proxy
statamic
mat-file
websitespark
hiding
jwebunit
customvalidator
incompatibletypeerror
custom-view
system-design
python-sockets
dynamic-content
umbraco5
cgpoint
oracle8i
libjson
open-basedir
reverse-debugging

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile