It is quite obvious that he problem has its root to the fact that routeParams.loggedIn
is a string.
So the solution is quite obvious:
// Change that:
this.loggedIn = this.routeParams.loggedIn;
// To this:
this.loggedIn = this.routeParams.loggedIn === 'true';
But why the weird behaviour ?
Why work not showing anything when loggedIn
is 'false' ?
Well, here is why:
The ngIf
directive uses the following toBoolean()
function to convert its value to boolean:
function toBoolean(value) {
if (typeof value === 'function') {
value = true;
} else if (value && value.length !== 0) {
var v = lowercase("" + value);
value = !(v == 'f' || v == '0' || v == 'false' || v == 'no' || v == 'n' || v == '[]');
} else {
value = false;
}
return value;
}
If a string is passed to toBoolean()
it converts it to lowercase and checks (among other things) if it equals 'false' (in which case it returns false
). This is different than the default JavaScript implementation which interprets any non-empty string as true
when casting to boolean.
So, let's examine the two cases for both ngIf
s:
loggedIn === 'true'
ngIf1 evaluates
home.loggedIn
--> 'true' (string)
ngIf1 passes this value throughtoBoolean()
toBoolean('true')
returns true (because it sees a string that can't match with any string considered falsy)
ngIf1 renders its contentngIf2 evaluates
!home.loggedIn
<=>!'true'
--> false (boolean)
(this happens because any non-empty string happens to evaluate to true)
ngIf2 passes this value throughtoBoolean()
toBoolean(false)
returns false
ngIf2 does not render its contentloggedIn === 'false'
ngIf1 evaluates
home.loggedIn
--> 'false' (string)
ngIf1 passes this value throughtoBoolean()
toBoolean('false')
returns false (because it sees a string that is considered falsy
ngIf1 does not render its contentngIf2 evaluates
!home.loggedIn
<=>!'false'
--> false (boolean)
(this happens because any non-empty string happens to evaluate to true)
ngIf2 passes this value throughtoBoolean()
toBoolean(false)
returns false
ngIf2 does not render its content
So, this explains the "weird" behaviour (hopefully in an understandable way).