@NgModule({
  declarations: [
    ChatSidebarComponent,
    ChatMessagesComponent,
    ChatFormComponent,
    ChatChannelComponent,
    ChatComponent,
  ],
  imports: [CommonModule],
  exports: [ChatComponent]
})
export class ChatModule {}

@Injectable({
  providedIn: 'root'
})
export class ChatService {
  // ...
}

this.httpClient.get('assets/messages.json')
  .subscribe(
    n => console.log('Messages'),
    error => console.log('Error'),
    () => console.log('Completed')
  );
 
/**
 * If the call succeeds
 */ 
// Messages
// Completed
 
/**
 * If the call fails
 */ 
// Error

class Service {
  number$: Observable<number>;
  private numberSubject: Subject<number>;
  
  constructor() {
    this.numberSubject = new Subject<number>();
    this.number$ = this.numberSubject
      .asObservable();
  }
}
 
@Component({
  // ...
})
class Component implements OnInit, OnDestroy {
  n: number;
  private subscription: Subscription;
  
  constructor(private service: Service) {}
  
  ngOnInit() {
    this.subscription = this.service.number$
      .subscribe(n => this.n = n);
  }
  
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

@Component({
  // ...
  template: `
    <p *ngIf="number$ | async as number">
      {{ number }}
    </p>
  `
})
class Component implements OnInit {
  number$: Observable<number>;
  
  constructor(private service: Service) {}
  
  ngOnInit() {
    this.number$ = this.service.number$;
  }
 
}

// auth.model.ts
interface BaseUser {
  username: string;
}
 
export interface AnonymousUser extends BaseUser {
  type: 'Anonymous';
}
 
export interface LoggedInUser extends BaseUser {
  type: 'LoggedIn';
  token: string;
  image: string;
}
 
export type User = AnonymousUser | LoggedInUser;

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  user$: Observable<User>;
  private userSubject: BehaviorSubject<User>;
 
  constructor(
    private httpClient: HttpClient
  ) {
    this.userSubject = 
      new BehaviorSubject<User>(ANONYMOUS_USER);
    this.user$ = this.userSubject.asObservable();
  }
  
  getUser(): User {
    return this.userSubject.getValue();
  }
 
  login(): void {
    this.httpClient.get('assets/user.json')
      .subscribe((user: LoggedInUser) => {
        this.userSubject.next(user);
      });
  }
 
  logout(): void {
    this.userSubject.next(ANONYMOUS_USER);
  }
}

@Component({
  // ...
  template: `
    <p>Welcome {{ (user$ | async).username }}</p>
  `
})
export class HomeComponent implements OnInit {
  user$: Observable<User>;
  constructor(private authService: AuthService) {}
 
  ngOnInit(): void {
    this.user$ = this.authService.user$;
  }
}

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  isLoggedIn$: Observable<boolean>;
  
  user$: Observable<User>;
  private userSubject: BehaviorSubject<User>;
 
  constructor(
    private httpClient: HttpClient
  ) {
    this.userSubject = 
      new BehaviorSubject<User>(ANONYMOUS_USER);
    this.user$ = this.userSubject.asObservable();
      
    this.isLoggedIn$ = this.user$.pipe(
      map(user => user.type !== 'Anonymous')
    );
  }
  
  // ...
}

@Component({
  // ...
})
export class LoginComponent implements OnInit, OnDestroy {
  private subscription: Subscription;
 
  constructor(private authService: AuthService, private router: Router) {}
 
  ngOnInit(): void {
    this.subscription = this.authService.isLoggedIn$
      .pipe(filter((isLoggedIn) => isLoggedIn))
      .subscribe(() => this.router.navigate(['']));
  }
 
  login(): void {
    this.authService.login();
  }
 
  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

@Component({
  // ...
})
export class LogoutComponent implements OnInit, OnDestroy {
  private subscription: Subscription;
 
  constructor(private authService: AuthService, private router: Router) {}
 
  ngOnInit(): void {
    this.subscription = this.authService.isLoggedIn$
      .pipe(filter((isLoggedIn) => !isLoggedIn))
      .subscribe(() => this.router.navigate(['']));
 
    this.authService.logout();
  }
 
  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

@Component({
  // ...
  template: `
    ...
    <ov-navigation [menu]="navigationMenu$ | async"></ov-navigation>
    ...
  `
})
export class AppComponent implements OnInit {
  navigationMenu$: Observable<NavigationMenu[]>;
 
  constructor(private authService: AuthService) {}
 
  ngOnInit(): void {
    this.navigationMenu$ = this.authService.isLoggedIn$.pipe(
      map(isLoggedIn => (isLoggedIn ? LOGGED_IN_MENU : LOGGED_OUT_MENU))
    );
  }
}

@Injectable({
  providedIn: 'root',
})
export class LoggedInGuard implements CanActivate {
  constructor(private router: Router, private authService: AuthService) {}
 
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    return this.authService.isLoggedIn$.pipe(
      tap((isLoggedIn) => {
        if (!isLoggedIn) {
          this.router.navigate(['login']);
        }
      })
    );
  }
}

@Injectable()
export class Interceptor implements HttpInterceptor {
  
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    /**
     * Process request
     */ 
    return next.handle(request)
      .pipe(
        map(response => {
          /**
            * Process response
            */ 
          return response;
        })
      );
  }
}

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(public authService: AuthService) {}
 
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
      
    const user = this.authService.getUser();
    if (user.type === 'LoggedIn') {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${user.token}`,
        },
      });
    }
 
    return next.handle(request);
  }
}

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  // ...
  constructor(
    private httpClient: HttpClient
  ) {
    const persistedUser = this.getPersistedUser();
    this.userSubject = 
      new BehaviorSubject<User>(persistedUser);
      
    // ...
    this.user$.subscribe((user) =>
      sessionStorage.setItem(
        USER_STORAGE_KEY, 
        JSON.stringify(user)
      )
    );
  }
  
  private getPersistedUser(): User {
    return JSON.parse(
      sessionStorage.getItem(USER_STORAGE_KEY)
    ) || ANONYMOUS_USER
  }
  
  // ...
}