title: Observable implementation in Angular 6
body: <p>I have been struggling understanding the Angular Observables but I can get it working.I am trying to get data to my dynamic navigation bar and I succeeded in verifying if user is logged in or not and so showing the Login or Logout button but I can't get user data.Below is my implementation</p>
  
  <p>This is <strong>user interface</strong>:</p>
  
  <pre><code> interface User{
   status:boolean,
   username:string,
   email:string
   }
  </code></pre>
  
  <p><strong>User service</strong>:</p>
  
  <pre><code>export class UserService {
  
  private Userr :BehaviorSubject&lt;User&gt;
  
   constructor(private http:HttpClient) { 
  this.Userr = new BehaviorSubject&lt;User&gt;({
    status:false,
    username:"",
    email:""  
  });
  }
  setUser(user:User){
  this.Userr.next(user);
   }
   get getUserData(){
    return this.Userr.asObservable();
  }
   get retrieveData(){
  return this.http.get&lt;User&gt;('/api/userdata')
  }
  }
  </code></pre>
  
  <p>Below is my <strong>navbar ts component</strong> implementation:</p>
  
  <pre><code>export class NavbarComponent implements OnInit {
  
  isLoggedIn$: Observable&lt;boolean&gt;;        
   User$ : Observable&lt;User&gt;;
   constructor(private authService: AuthService,private router:Router,private 
   user:UserService) { }
  
   ngOnInit() {
   this.isLoggedIn$ = this.authService.getLoggedIn; 
   this.User$ = this.user.getUserData;
   }
   }
  </code></pre>
  
  <p>I didn't post the logout function to only focus about geting data.
  And in <strong>navbar html componenet</strong> I have to following:</p>
  
  <pre><code>&lt;a class="nav-link" (click)="logout()" routerLink='/welcome'&gt;Welcome 
  {{User$.username}}!,Log Out!&lt;/a&gt;
  </code></pre>
  
  <p><strong>And the error is that User$.username is undefined</strong>.Thanks</p>
  
  <p><strong>Edit</strong>
     For anyone who face this problem the solution is to get the username as follows: </p>
  
  <pre><code>{{(User$ | async).username}}!
  </code></pre>