How to avoid UI being loaded before the data in Angular 2 + PrimeNG?

Issue

I'm new in Angular 2 and I'm using PrimeNG as well.

Just to ilustrate what's happening I duplicated the tab "Configurações" as you can see on the images.

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.

My HTML:

<p-tabView orientation="left">
    <p-tabPanel header="Administrador">
        <p-growl [value]="msgs"></p-growl>
        <p-dataTable [value]="tblColabAdminList">
            <p-column field="snomatrcompl" header="Matrícula"></p-column>
            <p-column field="nflativo" header="Status" styleClass="col-button">
                <template let-tblColabAdmin="rowData" pTemplate type="body">
                    <p-inputSwitch onLabel="ativo" offLabel="inativo" (click)="selectAdmin(tblColabAdmin)" [(ngModel)]="tblColabAdmin.nflativo"></p-inputSwitch>
                </template>
            </p-column>
        </p-dataTable>
    </p-tabPanel>
</p-tabView>

And it's my TypeScript:

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 => this.tblColabAdminList = tblColabAdminList,
            error => this.errorMessage = <any>error
        );
    }

    selectAdmin(tblColabAdmin: TblColabAdmin) {
        this.msgs = [];
        this.msgs.push({ severity: 'info', summary: 'Administrador selecionado', detail: 'Matrícula: ' + tblColabAdmin.snomatrcompl });
    }
}

I think that in the first tab the UI is being loaded before the data.

But why is it happening and how to solve that? Thanks!

Solution

A week later, I finally found a solution. I don't know if it's the best approach but works well:

First, I added <div id="tab" style="display:none"> to my HTML:

<div id="tab" style="display:none">
    <p-tabView orientation="left">
    ...
    </p-tabView>
</div>

Second, I added a setTimeout in my TypeScript to change display value in the style after 1 second:

...
this.configService.getTblColabAdmin().subscribe(
    tblColabAdminList => this.tblColabAdminList = tblColabAdminList,
    error => this.errorMessage = <any>error,
    () => {
        setTimeout(() => {
            document.getElementById("tab").setAttribute("style", "display:true");
        }, 1000);
    }
);
...

And that's all. Thanks, God =)

Answered By - Marcel