title: Dom rendering issues ngAfterViewInit ionic 2
body: <p>I am new to Ionic and angular. I notice some peculiar issues.</p>
  
  <p>Whenever I need to access the DOM i have to do a time out query to get dynamic elements.</p>
  
  <p>event if I use ngAfterViewInit - this doesn't work.</p>
  
  <p>So for example when trying to access a dynamically generated url this wont work.</p>
  
  <pre><code> ngAfterViewInit() {
  
      var that  = this;
      that.img = that.el.nativeElement.querySelector('img');
      alert(that.src);
  
  }
  </code></pre>
  
  <p>However this will</p>
  
  <pre><code> ngOnInit() {
  
        var that  = this;
        setTimeout(function () {  // still buggy need to wait for dom to load.
  
        that.img = that.el.nativeElement.querySelector('img');
  
        alert(that.src);
  
        }, 300);
      }
  </code></pre>
  
  <p>I am using ios emulator this is in an Ionic component I have tried the following code which doesn't work without a time out. Because the url which is generated by javascript in the view doesn't get registered without the Dom loading fully.</p>
  
  <pre><code>import { Component, ElementRef, Input, OnInit, AfterContentInit } from '@angular/core';
  
      import ImgCache from 'imgcache.js';
  
      /**
       * This component will be in charge of caching images and use them when the app is offline
       */
      @Component({
        selector: 'lazy-img',
        template: `
          &lt;div [ngClass]="{ 'placeholder': hidden }"&gt;
            &lt;img [ngClass]="{ 'active': !hidden }" [src]="src" (load)="load()" (error)="error()" /&gt;
          &lt;/div&gt;
        `
      })
      export class LazyImgComponent implements AfterContentInit {
  
        @Input() src: string;
  
        public img: HTMLImageElement;
        public hidden: boolean;
  
        constructor(public el: ElementRef) {
          this.hidden = true;
        };
  
        ngAfterContentInit() {
  
          var that  = this;
  
          that.img = that.el.nativeElement.querySelector('img');
          that.img.crossOrigin = 'Anonymous';
  
          // check if the images are already cached
          ImgCache.isCached(that.src, (path: string, success: boolean) =&gt; {
  
            if (success) {
              alert('cache ' + that.src);
              ImgCache.useCachedFile(that.img, function (){
                  alert('now using local copy');
                }, function(){
                  alert('could not load from cache');  // desnt work with live reload
                })
  
            } else {
              alert('no cache ' + that.src)
              ImgCache.useOnlineFile(that.img);
              ImgCache.cacheFile(that.src, () =&gt; { });
  
  
            }
  
          });
        }
  
  
  
        /**
         * This function will show the image when it has loaded
         */
        load(): void {
          this.hidden = false;
        }
  
        /**
         * This function will be triggered when http request fails
         */
        error(): void {
          this.img.remove();
        }
  
      }
  </code></pre>