Granular control over http call to show / hide loader [on hold]

up vote
-2
down vote

favorite

I have a service making http call and getting data back as Observable and i am assigning it to a variable in the component like follows

this.usersResponse$ = this.dataSvc.getUsers(pageNumber);

On html i am doing the follows

<div *ngIf="usersResponse$ | async as userResponse; else loading">

    <ng-container>

        <ul>

            <li *ngFor="let user of userResponse.data" (click)="detail(user.id)">

                <img [src]="user.avatar" alt="">

                <p>{{ user.first_name }} {{ user.last_name }}</p>

            </li>

        </ul>

    </ng-container>    

</div>

<ng-template #loading>

    <app-loading></app-loading>

</ng-template>

What i want to achieve is how to get a granular control to show loader before http call then make http call get the data back and turn off the loader, so that the UI is jumpy.

I appreciate the help.

asked yesterday

Humza Zaidi

New contributor

put on hold as off-topic by 200_success, Toby Speight, Graipher, Sᴀᴍ Onᴇᴌᴀ, vnp yesterday

This question appears to be off-topic. The users who voted to close gave this specific reason:

"Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – 200_success, Toby Speight, Graipher, Sᴀᴍ Onᴇᴌᴀ, vnp

If this question can be reworded to fit the rules in the help center, please edit the question.

1

Welcome on Code Review. Unfortunately, we don't provide code, we review code you've written. Depending on your problem, another site of the StackExchange network can help you. Please see our help center for more information.
– Calak
yesterday

add a comment |

up vote
-2
down vote

favorite

I have a service making http call and getting data back as Observable and i am assigning it to a variable in the component like follows

this.usersResponse$ = this.dataSvc.getUsers(pageNumber);

On html i am doing the follows

<div *ngIf="usersResponse$ | async as userResponse; else loading">

    <ng-container>

        <ul>

            <li *ngFor="let user of userResponse.data" (click)="detail(user.id)">

                <img [src]="user.avatar" alt="">

                <p>{{ user.first_name }} {{ user.last_name }}</p>

            </li>

        </ul>

    </ng-container>    

</div>

<ng-template #loading>

    <app-loading></app-loading>

</ng-template>

What i want to achieve is how to get a granular control to show loader before http call then make http call get the data back and turn off the loader, so that the UI is jumpy.

I appreciate the help.

asked yesterday

Humza Zaidi

New contributor

put on hold as off-topic by 200_success, Toby Speight, Graipher, Sᴀᴍ Onᴇᴌᴀ, vnp yesterday

This question appears to be off-topic. The users who voted to close gave this specific reason:

"Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – 200_success, Toby Speight, Graipher, Sᴀᴍ Onᴇᴌᴀ, vnp

If this question can be reworded to fit the rules in the help center, please edit the question.

1

Welcome on Code Review. Unfortunately, we don't provide code, we review code you've written. Depending on your problem, another site of the StackExchange network can help you. Please see our help center for more information.
– Calak
yesterday

add a comment |

up vote
-2
down vote

favorite

I have a service making http call and getting data back as Observable and i am assigning it to a variable in the component like follows

this.usersResponse$ = this.dataSvc.getUsers(pageNumber);

On html i am doing the follows

<div *ngIf="usersResponse$ | async as userResponse; else loading">

    <ng-container>

        <ul>

            <li *ngFor="let user of userResponse.data" (click)="detail(user.id)">

                <img [src]="user.avatar" alt="">

                <p>{{ user.first_name }} {{ user.last_name }}</p>

            </li>

        </ul>

    </ng-container>    

</div>

<ng-template #loading>

    <app-loading></app-loading>

</ng-template>

What i want to achieve is how to get a granular control to show loader before http call then make http call get the data back and turn off the loader, so that the UI is jumpy.

I appreciate the help.

asked yesterday

Humza Zaidi

New contributor

I have a service making http call and getting data back as Observable and i am assigning it to a variable in the component like follows

this.usersResponse$ = this.dataSvc.getUsers(pageNumber);

On html i am doing the follows

<div *ngIf="usersResponse$ | async as userResponse; else loading">

    <ng-container>

        <ul>

            <li *ngFor="let user of userResponse.data" (click)="detail(user.id)">

                <img [src]="user.avatar" alt="">

                <p>{{ user.first_name }} {{ user.last_name }}</p>

            </li>

        </ul>

    </ng-container>    

</div>

<ng-template #loading>

    <app-loading></app-loading>

</ng-template>

What i want to achieve is how to get a granular control to show loader before http call then make http call get the data back and turn off the loader, so that the UI is jumpy.

I appreciate the help.

<div *ngIf="usersResponse$ | async as userResponse; else loading">

    <ng-container>

        <ul>

            <li *ngFor="let user of userResponse.data" (click)="detail(user.id)">

                <img [src]="user.avatar" alt="">

                <p>{{ user.first_name }} {{ user.last_name }}</p>

            </li>

        </ul>

    </ng-container>    

</div>

<ng-template #loading>

    <app-loading></app-loading>

</ng-template>

<div *ngIf="usersResponse$ | async as userResponse; else loading">

    <ng-container>

        <ul>

            <li *ngFor="let user of userResponse.data" (click)="detail(user.id)">

                <img [src]="user.avatar" alt="">

                <p>{{ user.first_name }} {{ user.last_name }}</p>

            </li>

        </ul>

    </ng-container>    

</div>

<ng-template #loading>

    <app-loading></app-loading>

</ng-template>

angular-2+ rxjs

asked yesterday

Humza Zaidi

New contributor

asked yesterday

Humza Zaidi

New contributor

asked yesterday

Humza Zaidi

New contributor

asked yesterday

Humza Zaidi

asked yesterday

Humza Zaidi

New contributor

Humza Zaidi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

put on hold as off-topic by 200_success, Toby Speight, Graipher, Sᴀᴍ Onᴇᴌᴀ, vnp yesterday

This question appears to be off-topic. The users who voted to close gave this specific reason:

"Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – 200_success, Toby Speight, Graipher, Sᴀᴍ Onᴇᴌᴀ, vnp

If this question can be reworded to fit the rules in the help center, please edit the question.

put on hold as off-topic by 200_success, Toby Speight, Graipher, Sᴀᴍ Onᴇᴌᴀ, vnp yesterday

This question appears to be off-topic. The users who voted to close gave this specific reason:

"Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – 200_success, Toby Speight, Graipher, Sᴀᴍ Onᴇᴌᴀ, vnp

If this question can be reworded to fit the rules in the help center, please edit the question.

1

Welcome on Code Review. Unfortunately, we don't provide code, we review code you've written. Depending on your problem, another site of the StackExchange network can help you. Please see our help center for more information.
– Calak
yesterday

add a comment |

1

Welcome on Code Review. Unfortunately, we don't provide code, we review code you've written. Depending on your problem, another site of the StackExchange network can help you. Please see our help center for more information.
– Calak
yesterday

Welcome on Code Review. Unfortunately, we don't provide code, we review code you've written. Depending on your problem, another site of the StackExchange network can help you. Please see our help center for more information.
– Calak
yesterday

add a comment |

active

oldest

votes

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrtjryk