How to wait for page data to load and render in Angular with Observables

Question

Is this possible? I want to

1) Get some data on page load with an Observable

2) Update the DOM with that data and render the HTML

3) Find the pixel location of something

4) Scroll the page by an amount dependent on that location

I don't know how to make (3) wait until (2) has finished.

I'm working on this project that uses ngrx and Angular 2 and RxJS Observables to replace this one that uses JQuery.

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 position:fixed 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.

Answer 1

1. create one service:

   @injectable export class whateverService(){ //getter & setter service for position }

2. in your component class

   export whateverComponent implements OnInit(){ constructor(private serviceObj:whateverService){} ngOnInit(){ // write your logic here like : let x = this.serviceObj.getFunction(); setTimeout(function() { document.getElementById(x).scrollIntoView(); }, 100); } }