Cacher is the code snippet organizer for pro developers

@Component({
  ...
})
export class MainNavComponent implements OnInit {
   name$: Observable<string>;

   constructor(private authService: SessionService, private authQuery: SessionQuery) {}

   ngOnInit() {
     this.name$ = this.authQuery.name$;
   }

   logout() {
     this.authService.logout();
   }
}

<nav>

    <a routerLink="dashboard" *showIfLoggedIn="true">
      Dashboard
    </a>

    <a routerLink="login" *showIfLoggedIn="false">
      Login
    </a>

  <ng-container *showIfLoggedIn="true">
  
    <a (click)="logout()">
      Logout
    </a>
    
    <p>
      {{ name$ | async}}
    </p>
    
  </ng-container>

</nav>