title: How to wait for page data to load and render in Angular with Observables
body: <p>Is this possible? I want to</p>
  
  <p>1) Get some data on page load with an Observable </p>
  
  <p>2) Update the DOM with that data and render the HTML</p>
  
  <p>3) Find the pixel location of something</p>
  
  <p>4) Scroll the page by an amount dependent on that location</p>
  
  <p>I don't know how to make (3) wait until (2) has finished.</p>
  
  <p>I'm working on <a href="https://github.com/dancancro/great-big-angular2-example/blob/master/src/app/debate/debate.page.ts#L41-L49" rel="nofollow noreferrer">this project</a> that uses ngrx and Angular 2 and RxJS Observables to replace <a href="http://www.bernierebuttals.org" rel="nofollow noreferrer">this one</a> that uses JQuery.</p>
  
  <p>Here's the particular problem I'm trying to solve. If you pass an anchor id in a url like mypage.html#34, a page will scroll to that point. That's how pages have worked forever. The problem is that if there are fixed headings as divs with css <code>position:fixed</code> at the top of the page, the target anchor in the document will be moved to the top of the page, behind the headings. Moreover, it won't scroll if the data and anchors aren't there initially. So as far as I can tell you need to go to lengths in javascript in order to make it work right. If you know another way, without using an IFRAME, please let me know. I'm open to ideas. I want the anchor id to be in the page's url so I can share links to this page that contains a list and expands the details for the given item and scrolls to it.</p>