Is there a way for parent to know if a child in ng-content shows?

[Peter Hsu]

Hi Angular:

I was given a component called DataTableComponent that can show an array of objects in a table format. My data sources is are Observables, so I would like to create a common parent object called ListLoader that handles the loading and error. The requirements is that the table only refreshes if I call a function called refreshData.

@Component({

selector: `list-loader`,

template: `

<my-loading-wheel *ngIf="loading"></my-loading-wheel>

<ng-content *ngIf="!loading"></ng-content>

<!-- TODO: also there will be some common error handling logic -->

`,

})

export class ListLoaderComponent implements OnInit {

loading = true;

@Input()

private observes: Observable<any>;

@Input()

private table: DataTableComponent;

private _items = [];

get items() {

return this._items;

}

ngOnInit(): void {

this.observes.subscribe(

item => {

this._items.push(item);

// TODO: handle refresh on a partial loaded list

},

e => {

// TODO: handle error

},

() => {

this.loading = false;

if (this.table) {

console.log(`showing ${this._items.length} rows`);

this.table.refreshData();

}

}

);

}

}

Then I would use it like this on an instance of list where it has an Observable called contents 

<list-loader #loader [observes]="contents" [table]="dataTable">

<data-table #dataTable [items]="loader.items">

<!-- schema of the table -->

</data-table>

</list-loader>

What I am observing is that I keep seeing a empty table even though I am seeing this.table.refreshData() being called. Even though I DID see

"showing 5 rows"

in the console output.

My theory is that is this.table.refreshData() called before <ng-content *ngIf="!loading"></ng-content> is being updated. This content was not populated at all and somehow this leads to the refresh call to become a null op. (but how come this.table is not null?)

When I add refreshData call to the get method, the list renders but (of course) this makes the page totally unresponsive for burning a bunch of CPU

get items() {

if (this.table) {

this.table.refreshData();

}

return this._items;

}

This is not a viable solution but to me it proves that there was a "race condition" (so to speak) between then items get updated and loading gets updated.

Any idea how I can solve this problem? Is there something I can do to capture when <ng-content *ngIf="!loading"></ng-content> was added to the DOM?

thanks

Peter

[Dev C]

Hello peter

Can you give a try to refdetectchanges ?

Thanks.

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/9ac5137e-28c1-4023-a7e3-f5a517e2eb95%40googlegroups.com.

--
Sent from my mi note 4 phone.

[Peter Hsu]

thank you very much for the response

I was not sure if I understand correctly. I do not own the code to DataTableComponent. Unless I am misunderstanding the answer, I think that wouldn't work for me. However, I did successfully found a workaround.

I created a wrapper element called contents and modified the list loader template to this. Then I would call refreshData when the wrapper is initialized.

<my-loading-wheel *ngIf="loading"></my-loading-wheel>

<!-- TODO: add error handling -->

<contents *ngIf="!loading" [table]="table">

<ng-content></ng-content>

</contents>

To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/angular/9ac5137e-28c1-4023-a7e3-f5a517e2eb95%40googlegroups.com.

--
Sent from my mi note 4 phone.

--
You received this message because you are subscribed to a topic in the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/feuzsqZlorE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/CAKVZMjBfm%3De%2BOzKPyna4_FF2%2BwXz3J8RG9WWcLrbQ5wpwfETnA%40mail.gmail.com.