How to avoid UI being loaded before the data in Angular 2 + PrimeNG?
<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>