title: Angular2 Wait DOM element to load
body: <p>I have Component which has a member array variable. This array is bind to DOM with *ngFor. When I add new variable to array my view changes accordingly. Array holds tab names and initially it is set to have only 1 tab. When I refresh page array reinitialized which is what I was expecting. But when I logout and then log back in(router navigation) I see all previous tabs. It is weird to me, because if I <code>console.log(myTabs)</code> array has only 1 element(homeTab). </p>
  
  <p>UPDATE:</p>
  
  <p>.html</p>
  
  <pre><code>&lt;div style="display: table-caption" id="notify-tabs"&gt;
      &lt;ul class="nav nav-tabs" role="tablist" id="nav-bar"&gt;
          &lt;li role="presentation" data-toggle="tab" id="homeTab" [class.active]="activeTab==='homeTab'"&gt;&lt;a (click)="setValues('home')"&gt;Home&lt;/a&gt;
          &lt;li role="presentation" *ngFor="let tab of myTabs" data-toggle="tab" id={{tab}} [class.active]="activeTab===tab.toString()"&gt;&lt;a (click)="setValues(tab)"&gt;{{tab}}&lt;/a&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>.component.ts</p>
  
  <p>@Component({</p>
  
  <pre><code>    selector: 'notify-homepage',
          templateUrl: 'app/home/home.component.html',
          styleUrls: ['styles/css/bootstrap.min.css', 'styles/home.css'],
          directives: [DynamicComponent, TileComponent, MapComponent, HeaderComponent, ConversationComponent, ROUTER_DIRECTIVES]
  })
  export class HomeComponent{
      public myTabs: number[] = [21442];
      public activeTab: string = 'homeTab';
  
      ngOnInit() {
      //Assume fully operating MapService here
      this.subscription = this.mapService.conversationId.subscribe(
          (id: number) =&gt; {
              this.myTabs.push(id);
              this.setValues(id);
              this.activeTab = id.toString();               
          })
      }
      ngOnDestroy() {
      this.subscription.unsubscribe();
      ...
  }
  }
  </code></pre>
  
  <p>map.service.ts</p>
  
  <pre><code>@Injectable()
  export class MapService {
      private conversationIdSource = new ReplaySubject&lt;number&gt;();
      public conversationId = this.conversationIdSource.asObservable();
  
      ...
  
       showConversation(id: number) {
           this.conversationIdSource.next(id);
       }
  }
  </code></pre>