I have a sidebar and an Angular Material toolbar that should only be shown if the user is logged in.
Now, I have a service to determine if the user is logged in that has a method that returns true / false.
The problem is that the login is a different component to the sidebar and the toolbar; so when you login, the initial true / false value of these components is not updated.
in angularJS could add a $ .watch (); Is there something similar in angular6? or another way to update the value of a variable of a component from another component?
my service:
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Http, Response } from '@angular/http';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class SessionService {
constructor(private router:Router, private http:Http) { }
IslogIn(){
if(sessionStorage.getItem("Id")!==null){
return true;
}else{
return false;
}
}
}
my app.component.ts:
import { Component } from '@angular/core';
import {NotificacionesService} from "./services/notificaciones.service";
import {SessionService} from "./services/sesion.service";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Aces SRL ';
estado= false;
logueado:boolean = false;
constructor(private Notif:NotificacionesService, private Sesion:SessionService){
this.MisNotif = this.Notif.FnNotificaciones(1);
this.cant = this.MisNotif.length;
this.logueado = this.Sesion.IslogIn();
}
}
My app.component.html (fragment)
<mat-drawer-container>
<mat-drawer #drawer class="example-sidenav" mode="side" opened="true" [hidden]="!logeado">
<app-menu></app-menu>
</mat-drawer>
<!-- Contenido-->
<div class="example-sidenav-content">
</div>
<router-outlet></router-outlet>
<button type="button" mat-button="mat-button" (click)="drawer.toggle()">Toggle sidenav</button>
</mat-drawer-container>
Your support is appreciated in advance.
salu2!