title: ElementRef is losing its value after getting called second time from parent component
body: <p>I am facing a weird issue with the ElementRef in Angular 5.
  I have a home component which contains two popups, which consists of different component ListPopUp and tile. I am iterating through a list and creating multiple tiles on the home page. When you click on a tile it will open a listPopup.</p>
  
  <p>From the list popUp you can click a function that will trigger a event in Parent and thus trigger a function in tile component.</p>
  
  <p>Everything works file except when we trigger the function second time the myBar ElementRef (in tile component class) returns undefined. I have tried accessing the bar directly using getElementById("myBar") but it also becomes undefined the second time. I am not sure why this is happening, I have tried to modify the code and look for any explanation in Angular documentation but nothing is helping.</p>
  
  <p>I have provided the code for all the three components.</p>
  
  <p>Please let me know if further info is required.</p>
  
  <p>Here is the code:</p>
  
  <p>TileComponent:</p>
  
  <pre><code>import { Component, Input, ViewChild, ElementRef } from '@angular/core';
  
  @Component({
    selector: 'tile',
    templateUrl: 'tile.html'
  })
  export class TileComponent {
    @Input('tileinfo') tileinfo;
    @ViewChild('myBar') myBar:ElementRef;
  
    constructor() {
  
    };
  
    ngOnInit() {
  
    };
  
    move(value) {
      let elem = this.myBar;
      let id = setInterval(frame, this.tileinfo.progressSpeed * 1000);
      this.tileinfo.active = value;
      let val = this.tileinfo;
      val.allowNext = false;
      function frame() {
        if (val.progress &gt;= 100) {
          clearInterval(id);
          delete val.active;
          val.allowNext = true;
          val.progress = 0;
        } else {
          val.progress++;
          elem.nativeElement.style.width = val.progress + '%';
        }
      }
    }
  
  }
  </code></pre>
  
  <p>HomeComponent Code: </p>
  
  <pre><code>import { Component, ViewChild } from '@angular/core';
  
  import { GlobalProvider } from '../../providers/global/global';
  import { CommonMethodsProvider } from '../../providers/common-methods/common-methods';
  
  
  @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
  })
  export class HomePage {
    @ViewChild('tileComponent') tileComponent: any;
    tileInfoArr: Array&lt;any&gt; = [];
    ageList: Array&lt;any&gt; = [];
    gameObject: any;
    modalInfo: any = {};
    modalList: any = {};
    constructor(public navCtrl: NavController, private globalService: GlobalProvider, private commonService: CommonMethodsProvider) {
      this.globalService.getGameDummy().subscribe(data =&gt; this.gameSetupHelper(data), error =&gt; console.log(error));
    }
  
    ngOnInit() {
  
    }
  
    fillTiles() {
      this.tileInfoArr = [
        {
          name: 'Research',
          progress: 1,
          description: "Description Here",
          progressSpeed: this.gameObject.researchProgress,
          allowNext: true,
        },
      ];
    }
  
    tileClicked(tileInfo) {
      switch (tileInfo.name) {
        case 'Research':
          if (this.tileInfoArr[0].allowNext)
          this.modalList = this.commonService.generateModalList("Research List", this.globalService.getAgeDataObj().researchList);
          break;
        default:
          break;
      }
    };
  
    listItemClicked(stuff) {
      if (stuff.data === "age") {
        this.tileComponent.move(this.gameObject.nextAgeDisplayName);
      } else {
        this.tileComponent.move(stuff.data.name);
      }
    };
  
  }
  </code></pre>
  
  <p>ListPopupComponent:</p>
  
  <pre><code>import { Component, Input, Output, EventEmitter } from '@angular/core';
  
  @Component({
    selector: 'list-popup',
    templateUrl: 'list-popup.html'
  })
  export class ListPopupComponent {
    @Input('modalList') modalList;
    @Output() listItemClicked = new EventEmitter();
  
    text: string;
  
    constructor() {
  
    };
  
    startStuff(listItem): void {
      this.listItemClicked.emit({
        data: listItem
      });
    }
  
    closePopup() {
      this.modalList.showPopup = false;
    };
  
  }
  </code></pre>
  
  <p>HTML :
  HomeComponent:</p>
  
  <pre><code> &lt;div padding style="padding-top: 0px"&gt;
      &lt;div class="tile-container-container"&gt;
        &lt;div class="tile-container" *ngFor="let tileinfo of tileInfoArr;"&gt;
          &lt;tile [tileinfo]="tileinfo" (click)="tileClicked(tileinfo)" #tileComponent&gt;&lt;/tile&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;info-popup [modalInfo]="modalInfo"&gt;&lt;/info-popup&gt;
  &lt;list-popup (listItemClicked) = "listItemClicked($event)" [modalList]="modalList"&gt;&lt;/list-popup&gt;
  </code></pre>
  
  <p>TileHTML:</p>
  
  <pre><code>&lt;div class="tile-box"&gt;
    &lt;div class="tile-inside"&gt;
      &lt;h6&gt;
        {{tileinfo.name}}
      &lt;/h6&gt;
      &lt;p&gt;
        {{tileinfo.description}}
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;footer *ngIf="tileinfo.progress !== 0"&gt;
      &lt;div id="myProgress"&gt;
        &lt;div id="myBar" #myBar&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>ListPopupHTML</p>
  
  <pre><code>&lt;div *ngIf="modalList.showPopup" id="myModal" class="modal"&gt;
    &lt;div class="modal-content card"&gt;
      &lt;span class="close" (click)="closePopup()"&gt;
       x
      &lt;/span&gt;
      &lt;div&gt;
        &lt;h6&gt;
          {{modalList.title}}
        &lt;/h6&gt;
      &lt;/div&gt;
      &lt;hr&gt;
      &lt;div *ngIf="modalList.list &amp;&amp; modalList.list.length &gt; 0;else ageChange"&gt;
        &lt;ul class="list"&gt;
          &lt;li  class="item" (click)="startStuff(listInfo)" *ngFor="let listInfo of modalList.list; index as i; even as isEven; odd as isOdd" class=""&gt;
            &lt;div&gt;
              &lt;span class=""&gt;{{listInfo.name}}&lt;/span&gt;
              &lt;br&gt;
              &lt;span&gt;{{listInfo.description}}&lt;/span&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;ng-template #ageChange&gt;
        &lt;div class="age-Change"&gt;
          &lt;h1&gt;
            Enter New Age
          &lt;/h1&gt;        
          &lt;div (click)="startStuff('age')" class="new-age-icon"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/ng-template&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>