CODEWITHSUNDEEP
angularngx-datatable
Sahi
Sahi

Reputation: 1484

ngx-datatable - Rows are not rendered properly in tab set

I have an angular Component (Country Component ) with 3 child components as Tab( States, Population, Industries). The Parent Component have a drop down, say 'Country List' ,which controls the data to be shown in the tab. On Load, nothing will be selected in Country List Drop down and states tab will be loaded with 0 rows int state list.

I am using @swimlane/ngx-datatable for the State List table.

When I select a country(ex: India), state List table will be populated (29 rows). Everything works fine so far.

When I move to another tab (Population or Industries), and change the country (having 10 states), then go to States Table, only 1 row (first row)is displayed in state list table.

Footer shows exact count in both cases.

Why is this happening.? Any issue with ngx-datatable.?

Parent Component:

<tabset>
	<tab heading="States">
		<app-states>
		</app-states>
	</tab>
	<tab heading="Population">
		<app-Population>
		</app-Population>
	</tab>
	<tab heading="Industries">
		<app-Industries>
		</app-Industries>
	</tab>
</tabset>

Form Layout: enter image description here

Upvotes: 2

Views: 2078

Answers (1)

Sahi
Sahi

Reputation: 1484

This issue can be handled using a boolean parameter as shown below:

MyComponent.ts

    export class MyComponent implements OnInit{
        IsDataReady:boolean
        mydata=[];

        constructor(private _myService:myService){
            this.IsDataReady=false;
        }

        ngOnInit() {
            this.LoadData();    
        }

        LoadData(){
            this.IsDataReady=false;
            //Get data from service
            this._myService.getData().subscribe(data=>{
                this.mydata=data;
                this.IsDataReady=true;
            }
        }
    }

add the boolean variable in *ngIf as shown below

MyComponent.html

    <ngx-datatable #data class="material" *ngIf="IsDataReady">
    </ngx-datatable>

Upvotes: 1

Related Questions