title: Angular data sharing architecture
body: <p>I feel like I fundamentally misunderstand one part of Angular, imagine the following:</p>
  <p>You have a navbar component which shows the logged in user, something like:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;nav *ngIf=&quot;user$ | async as user&quot;&gt;user.name&lt;/nav&gt;
  </code></pre>
  <p>then you have a user-edit component, something like:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div *ngIf=&quot;user$ | async as user&quot; class=&quot;form&quot;&gt;
    &lt;input [(ngModel)]=&quot;user.name&quot;&gt;
  &lt;/div&gt;
  </code></pre>
  <h6>where <code>user$</code> is an <code>Observable</code> that one gets from a service.</h6>
  <p>Now in the app you naturally show a navbar and the other components, this means both components need the same data. To prevent multiple api calls you can use an <code>cachedResponse</code> or use <code>shareReplay()</code> within a <code>user.service.ts</code>. Great!</p>
  <p>Here's my question, making the service this way requires a lot more code than, for instance, sharing a <code>user</code> object directly from a <code>service</code> like so:</p>
  <pre class="lang-js prettyprint-override"><code>export class UserService implements OnInit {
    public user: User = new User;
    
    constructor(public http: HttpClient) {}
  
    ngOnInit() {
      this.http.get&lt;User&gt;('api.com/user').subscribe((user: User) =&gt; this.user = user);
    }
  
    updateUser() {
      this.http.post('api.com/user', this.user).subscribe((user: User) =&gt; this.user = user);
    }
  
  }
  </code></pre>
  <p>And in both components just add:<br />
  <code>constructor(public userService: UserService) {}</code><br />
  and use it in the template like so:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;nav&gt;userService.user.name&lt;/nav&gt;
  </code></pre>
  <p>and:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;form&quot;&gt;
    &lt;input [(ngModel)]=&quot;userService.user.name&quot;&gt;
    &lt;button (click)=&quot;userService.updateUser&quot;&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Apart from not using the Angular Async Pipe what would be bad about a structure like this?<br />
  If you update the name all other components also get updated.</p>
  <p>I saw <a href="https://stackoverflow.com/questions/51919028/angular-why-subscriptions-why-not-to-use-services-properties-in-components">this</a> question on here but the all the answers are non-issues (it seems to me). Just to answer them:</p>
  <ol>
  <li><strong>Memory leak</strong>, no because http services unsubscribe in Angular (I would only use this for http calls).</li>
  <li><strong>Value update is not track</strong>, this could be an issue if you want to mutate values from the same observable but if you would want that one would make a different observable.</li>
  <li><strong>Separation of concerns</strong>, what is bad about having one global user object? Only components which use the <code>UserService</code> have access.</li>
  <li>Not really an issue with this type of architecture.</li>
  </ol>
  <p>Why would this be bad?, or rather why don't I see any examples of people doing this.</p>