title: How to avoid the pain of Observable when sharing data between routes in Angular?
body: <p>When we're looking to share data between routes, the only viable solution seems to use a service. Since we want data to be rerendered in the view when they are updated, we must use <code>BehaviorSubject</code>.</p>
  
  <p>So, correct me if i'm wrong but a simple component will look like this:</p>
  
  <pre><code>@Component({
      selector: 'user-info',
      template: `
          {{($user | async).firstName}}
          &lt;button (click)="updateName()"&gt;&lt;/button&gt;
      `
  })
  export class UserInfoComponent {
  
      private $user;
      private subscribe;
  
      constructor(private service: UserService) {
          this.user$ = this.service.get();
      }
  
      updateName() {
          this.subscribe = this.service.get().subscribe(user =&gt; 
              this.service.update({...user, firstName: 'new-name'})
          );
      }
  
      ngOnDestroy() {
          this.subscribe.unsubscribe();
      }
  }
  </code></pre>
  
  <p>This sounds really frustrating because if we did not use the router we could just call the component with <code>&lt;user-info [user]="user | async"&gt;&lt;/user-info&gt;</code> and it would be so much cleaner:</p>
  
  <pre><code>@Component({
      selector: 'user-info',
      template: `
          {{user.lastName}}
          &lt;button (click)="updateName()"&gt;&lt;/button&gt;
      `
  })
  export class UserInfo2Component {
  
      @Input() user: User;
  
      constructor(private service: UserService) {}
  
      updateName() {
          this.service.update({...user, lastName: 'new-name'});
      }
  }
  </code></pre>
  
  <p>So my question is: Why is it so difficult to share data between routes ? Is there a better solution that I could have missed ? </p>