Can someone help me with this ngIf condition, I'm trying to hide the logout when key doesn't exist and show it when its exist in the localStorage. I'm getting confused about multiple conditions in the ngIf but the checks are correct.
This check is being used as a directive.
checkSession() {
var checkKey = localStorage.getItem('sessionKey');
if(checkKey == null){
var showLogout = false;
console.log('null key: ', checkKey);
} else {
showLogout = true;
//this check will only be available once the user is logged in
console.log('key exist: ' checkKey);
}
}
Html
<a (click)="logout()" title="Logout" *ngIf="showLogout || (!showLogout && !showLogout)">
<i class="fa fa-sign-out fa-2x" aria-hidden="true" ></i>
</a>
Can someone help me with this ngIf condition, I'm trying to hide the logout when key doesn't exist and show it when its exist in the localStorage. I'm getting confused about multiple conditions in the ngIf but the checks are correct.
This check is being used as a directive.
checkSession() {
var checkKey = localStorage.getItem('sessionKey');
if(checkKey == null){
var showLogout = false;
console.log('null key: ', checkKey);
} else {
showLogout = true;
//this check will only be available once the user is logged in
console.log('key exist: ' checkKey);
}
}
Html
<a (click)="logout()" title="Logout" *ngIf="showLogout || (!showLogout && !showLogout)">
<i class="fa fa-sign-out fa-2x" aria-hidden="true" ></i>
</a>
1 Answer
Reset to default 4It seems what you want is
export class MyComponent {
/// other stuff
showLogout:boolean = false;
checkSession() {
var checkKey = localStorage.getItem('sessionKey');
if(checkKey == null){
this.showLogout = false; // changed
console.log('null key: ', checkKey);
} else {
this.showLogout = true; // changed
//this check will only be available once the user is logged in
console.log('key exist: ' checkKey);
}
}
}
A local variable won't be available in the template. The template can only access top-level properties and methods of your ponents class directly.