title: Angular set scroll position after div and data are fully rendered
body: <p>I've been trying to keep scroll position of  element holding a grid with hundreds of rows of data. Right now it's set with  overflow-y: auto. If I use router to go to different page and than go back I'd like the scroll to be in the same position. I thought that using ngAfterViewInit will do the trick but unfortunately it doesn't work. If I use the console to fire up the set position command it works fine. I guess the problem is with rows still being loaded and not yet rendered when calling ngAfterViewInit .</p>
  
  <pre><code>@Component({
    selector: 'grid',
    templateUrl: './grid.component.html',
    styleUrls: ['./grid.component.scss']
  })
  export class GridComponent implements OnInit, OnDestroy {
  
    @Input() rows: Array&lt;Row&gt;;
    @Input() someKindOfGridId: string;
    localGridConfigValue: ILocalGridConfigValue;
  
    constructor(private configService: ConfigService) { }
  
    ngOnInit() {
      this.localGridConfigValue = this.configService.getConfigForCurrentGrid(this.someKindOfGridId);
    }
  
    ngAfterViewInit(){
      document.getElementById(this.someKindOfGridId).scrollTop = this.localGridConfigValue.gridScrollTopPos;
    }
  
    ngOnDestroy() {
      this.localGridConfigValue.gridScrollTopPos = document.getElementById(this.someKindOfGridId).scrollTop;
    }
  }
  </code></pre>
  
  <p>I'm still learning angular and any help will be greatly appreciated.</p>
  
  <p>Regards.</p>