Event when finished all nested ngFor loops in angular?
up vote
0
down vote
favorite
The nested ngFor loops loading behavior looks ugly. I'am searching a way of displaying both loops only if they are rendered completly.
<div *ngFor="let group of bookings$ | async | groupBy: 'date' | pairs; trackBy: trackByFn">
<ion-item-divider color="light">
<ion-label text-left>
group[0]
</ion-label>
</ion-item-divider>
<app-booking *ngFor="let booking of group[1]; trackBy: trackByFn" [booking]="booking">
</app-booking>
</div>
angular
asked Nov 9 at 21:31
robert
1941214
add a comment |
up vote
0
down vote
favorite
The nested ngFor loops loading behavior looks ugly. I'am searching a way of displaying both loops only if they are rendered completly.
<div *ngFor="let group of bookings$ | async | groupBy: 'date' | pairs; trackBy: trackByFn">
<ion-item-divider color="light">
<ion-label text-left>
group[0]
</ion-label>
</ion-item-divider>
<app-booking *ngFor="let booking of group[1]; trackBy: trackByFn" [booking]="booking">
</app-booking>
</div>
angular
asked Nov 9 at 21:31
robert
1941214
I don't think you can avoid the use of ngFor here without some a complex manual workaround which emulates ngFor.
– jburtondev
Nov 9 at 21:36
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
The nested ngFor loops loading behavior looks ugly. I'am searching a way of displaying both loops only if they are rendered completly.
<div *ngFor="let group of bookings$ | async | groupBy: 'date' | pairs; trackBy: trackByFn">
<ion-item-divider color="light">
<ion-label text-left>
group[0]
</ion-label>
</ion-item-divider>
<app-booking *ngFor="let booking of group[1]; trackBy: trackByFn" [booking]="booking">
</app-booking>
</div>
angular
asked Nov 9 at 21:31
robert
1941214
The nested ngFor loops loading behavior looks ugly. I'am searching a way of displaying both loops only if they are rendered completly.
<div *ngFor="let group of bookings$ | async | groupBy: 'date' | pairs; trackBy: trackByFn">
<ion-item-divider color="light">
<ion-label text-left>
group[0]
</ion-label>
</ion-item-divider>
<app-booking *ngFor="let booking of group[1]; trackBy: trackByFn" [booking]="booking">
</app-booking>
</div>
angular
angular
asked Nov 9 at 21:31
robert
1941214
asked Nov 9 at 21:31
robert
1941214
asked Nov 9 at 21:31
robert
1941214
asked Nov 9 at 21:31
robert
1941214
asked Nov 9 at 21:31
robert
1941214
1941214
I don't think you can avoid the use of ngFor here without some a complex manual workaround which emulates ngFor.
– jburtondev
Nov 9 at 21:36
add a comment |
I don't think you can avoid the use of ngFor here without some a complex manual workaround which emulates ngFor.
– jburtondev
Nov 9 at 21:36
I don't think you can avoid the use of ngFor here without some a complex manual workaround which emulates ngFor.
– jburtondev
Nov 9 at 21:36
I don't think you can avoid the use of ngFor here without some a complex manual workaround which emulates ngFor.
– jburtondev
Nov 9 at 21:36
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
You can put the logic to retrieve data in a resolver - which will get the data the page needs before rendering.
export class SomeResolver implements Resolve<any>
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any
return this.yourService.yourMethod().pipe(take(1));
answered Nov 9 at 23:59
zer0
6271524
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
You can put the logic to retrieve data in a resolver - which will get the data the page needs before rendering.
export class SomeResolver implements Resolve<any>
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any
return this.yourService.yourMethod().pipe(take(1));
answered Nov 9 at 23:59
zer0
6271524
add a comment |
up vote
0
down vote
You can put the logic to retrieve data in a resolver - which will get the data the page needs before rendering.
export class SomeResolver implements Resolve<any>
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any
return this.yourService.yourMethod().pipe(take(1));
answered Nov 9 at 23:59
zer0
6271524
add a comment |
up vote
0
down vote
up vote
0
down vote
You can put the logic to retrieve data in a resolver - which will get the data the page needs before rendering.
export class SomeResolver implements Resolve<any>
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any
return this.yourService.yourMethod().pipe(take(1));
answered Nov 9 at 23:59
zer0
6271524
You can put the logic to retrieve data in a resolver - which will get the data the page needs before rendering.
export class SomeResolver implements Resolve<any>
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any
return this.yourService.yourMethod().pipe(take(1));
answered Nov 9 at 23:59
zer0
6271524
answered Nov 9 at 23:59
zer0
6271524
answered Nov 9 at 23:59
zer0
6271524
answered Nov 9 at 23:59
zer0
6271524
6271524
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53233514%2fevent-when-finished-all-nested-ngfor-loops-in-angular%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I don't think you can avoid the use of ngFor here without some a complex manual workaround which emulates ngFor.
– jburtondev
Nov 9 at 21:36