force page or app.component reload angular

Question

I need to refresh some values in app.component in angular.
I have my navigation within app.component.html with div *ngIf and with a variable it decides which navigation is shown.

But at Login or Logout (when Navigation should change) it still shows the old value, because app.component doesn't refresh.

app.component.html :

<div *ngIf="session.xy == null or session.xy lt 1" class="navbar" role="banner">
  <div class="dropdown"><button class="dropbtn">Navigation<i class="fa fa-caret-down"></i></button>
    <div class="dropdown-content">
      <nav>
        <a routerLink="/">Home</a>
        <a routerLink="/login">Login</a>
        <a routerLink="/register">Registrieren</a>
        <a routerLink="/Informationen">Informationen</a>
        <a routerLink="/#Kontakt">Kontakt</a>
      </nav>
    </div>
  </div>
</div>
<div *ngIf="session.xy gt 0" class="navbar" role="banner">
  <div class="dropdown"><button class="dropbtn">Navigation<i class="fa fa-caret-down"></i></button>
    <div class="dropdown-content">
      <nav>
        <a routerLink="/">Home</a>
        <a *ngFor="let item of session.items" routerLink="/item/{{item}}">Item: {{item}}</a>
        <a routerLink="/Pazzles">Item2</a>
      </nav>
    </div>
  </div>
</div>

app.component.ts :

export class AppComponent implements OnInit{
  title = 'xy-app';
  success: string = '';
  error: string = '';
  constructor(public sessionService: SessionService, public session: Session) { }

  ngOnInit(): void {
    this.sessionService.ReadSession()
    .subscribe(
      (res: Session) => {
        this.session = res;
      },
      (err) => this.error = err
    );
  }
}

Login-Function:

Login(login: Login): Observable<Session> {
    return this.http.post<any>(`${this.baseUrl}/LogIn`, { data: login })
      .pipe(map((res) => {
        this.session = res;
        localStorage.setItem('session', res['sessid']);
        this.router.navigate(['/home']);
        return this.session;
      }),
      catchError(this.handleError));
  }
}

Logout-Function:

  DeleteSession(){
    return this.http.post<any>(`${this.baseUrl}/DeleteServerSess`, { data: this.sessid })
      .pipe(map((res) => {
        this.session = res;
        localStorage.clear;
        this.router.navigate(['/home']);
        return this.session;
      }),
      catchError(this.handleError));
  }
}

Answer 1

You can refresh value with the update throw Input or Output

Or you can push force refresh with ApllicationRef

Just call include ApllicationRef dependence and call method tick

Answer 2

I guess you want refresh app.component page if your session changes. Normally if you want angular detect changes automatically, you would pass session in as @Input. But since you are calling session from service. what you can do is when getting the new data, you manually let angular do the change for you. through injecting changeDetectorRef

constructor(private _cdr: ChangeDetectorRef){}

Then in your subscrible call

this._cdr.detectChanges();

Answer 3

i have resolved this "problem" with location.replace("/"); with this it reloads the whole site after login and after logout.