title: How to avoid UI being loaded before the data in Angular 2 + PrimeNG?
body: <p>I'm new in Angular 2 and I'm using PrimeNG as well.</p>
  
  <p>Just to ilustrate what's happening I duplicated the tab "Configurações" as you can see on the images.</p>
  
  <p>The two tabs have exactly the same code but the behaviors are different. The first one doesn't have the toggles loaded correctly. The second one works fine.</p>
  
  <p><a href="https://i.stack.imgur.com/BOFYF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BOFYF.png" alt="First Tab"></a></p>
  
  <p><a href="https://i.stack.imgur.com/ePc3x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ePc3x.png" alt="Second Tab"></a></p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;p-tabView orientation="left"&gt;
      &lt;p-tabPanel header="Administrador"&gt;
          &lt;p-growl [value]="msgs"&gt;&lt;/p-growl&gt;
          &lt;p-dataTable [value]="tblColabAdminList"&gt;
              &lt;p-column field="snomatrcompl" header="Matrícula"&gt;&lt;/p-column&gt;
              &lt;p-column field="nflativo" header="Status" styleClass="col-button"&gt;
                  &lt;template let-tblColabAdmin="rowData" pTemplate type="body"&gt;
                      &lt;p-inputSwitch onLabel="ativo" offLabel="inativo" (click)="selectAdmin(tblColabAdmin)" [(ngModel)]="tblColabAdmin.nflativo"&gt;&lt;/p-inputSwitch&gt;
                  &lt;/template&gt;
              &lt;/p-column&gt;
          &lt;/p-dataTable&gt;
      &lt;/p-tabPanel&gt;
  &lt;/p-tabView&gt;
  </code></pre>
  
  <p>And it's my TypeScript:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ConfigService } from './config/configService';
  import { TblColabAdmin } from './config/TblColabAdmin';
  import { Message } from 'primeng/primeng';
  
  @Component({
      templateUrl: 'app/app.config.html',
      selector: 'config-app',
      providers: [ConfigService]
  })
  export class AppConfig implements OnInit {
      private errorMessage: string;
  
      tblColabAdminList: TblColabAdmin[];
  
      msgs: Message[] = [];
  
      constructor(
          private configService: ConfigService) {
      }
  
      ngOnInit() {
          this.getConfig();
      }
  
      getConfig() {
          this.configService.getTblColabAdmin().subscribe(
              tblColabAdminList =&gt; this.tblColabAdminList = tblColabAdminList,
              error =&gt; this.errorMessage = &lt;any&gt;error
          );
      }
  
      selectAdmin(tblColabAdmin: TblColabAdmin) {
          this.msgs = [];
          this.msgs.push({ severity: 'info', summary: 'Administrador selecionado', detail: 'Matrícula: ' + tblColabAdmin.snomatrcompl });
      }
  }
  </code></pre>
  
  <p>I think that in the first tab the UI is being loaded before the data.</p>
  
  <p>But why is it happening and how to solve that? Thanks!</p>