web-dev-qa-db-fra.com

Comment afficher spinner dans angular 6

Je suis nouveau sur angular et développement web mais capable de concevoir diverses pages web et d'obtenir des données du serveur en utilisant le module client HTTP.

Lors de la récupération des données du serveur, je souhaite afficher la progression du spinner, mais je ne suis pas en mesure de le faire. J'ai recherché google mais rien ne m'a obligé à le faire. Veuillez m'aider à y parvenir.

Code:

login.component.ts

 userLogin() {
        console.log('logging in');
        this.eService.signIn(this.user_name, this.password)
        .subscribe(
            data => {
                console.log(data);
               this.admin = data;
               if ( this.admin.firstLogin === true) {
                   // go to update admin password
               } else {
                this.router.navigate(['/dashboard']);
                }
               localStorage.setItem('isLoggedin', 'true');
             }
        );
    }

login.html

<div class="login-page" [@routerTransition]>
    <div class="row justify-content-md-center">
        <div class="col-md-4">
            <img src="assets/images/logo.png" width="150px" class="user-avatar" />
            <h1>Users/h1>
            <form role="form">
                <div class="form-content">
                    <div class="form-group">
                        <input type="text" name="username" [(ngModel)]="user_name" class="form-control input-underline input-lg" id="" placeholder="username">
                    </div>

                    <div class="form-group">
                        <input type="password" name="password" [(ngModel)]="password" (keyup.enter)="userLogin()" class="form-control input-underline input-lg" id="" placeholder="password">
                    </div>
                </div>
                <a class="btn rounded-btn" (click)="userLogin()"> Log in </a>
                &nbsp;
                <a class="btn rounded-btn" >Clear</a>
            </form>
        </div>
    </div>
</div>

Donc, lorsque je demande un service de connexion, je veux montrer le spinner, veuillez m'aider, comment puis-je le faire?

Je sais que c'est simple pour de nombreux développeurs ici, mais pour moi, cela devient quelque peu difficile.

angularangular-materialspinner
6
Anil

Ajoutez le spinner dans votre code HTML, comme ceci:

<img *ngIf="loading" src="assets/my-spinner.gif" /> <!-- Or use a CSS one if you like -->

Ensuite, dans votre TypeScript, vous devez créer une variable appelée loading, et la définir comme suit:

userLogin() {
    console.log('logging in');
    this.loading = true; // Add this line
    this.eService.signIn(this.user_name, this.password)
    .subscribe(
        data => {
            console.log(data);
           this.loading = false; // And this one
           this.admin = data;
           if ( this.admin.firstLogin === true) {
               // go to update admin password
           } else {
            this.router.navigate(['/dashboard']);
            }
           localStorage.setItem('isLoggedin', 'true');
         }
    );
}

Cela définira loading sur true pendant que le service est en action

7
user184994

Vous pouvez utiliser ng4-loading-spinner

Exécutez npm i ng4-loading-spinner --save

Importer le module dans le module racine de votre application

import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';

Faire une entrée d'importation

 imports: [ Ng4LoadingSpinnerModule.forRoot() ]

Incluez le composant spinner à votre composant de niveau racine.

<ng4-loading-spinner> </ng4-loading-spinner>

utiliser show() et hide() dans subscribe callback

import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
 constructor(
        private spinnerService: Ng4LoadingSpinnerService
    ) { }
    userLogin() {

        this.spinnerService.show();
            console.log('logging in');
            this.eService.signIn(this.user_name, this.password)
            .subscribe(
                data => {
                    console.log(data);
                   this.admin = data;
                   if ( this.admin.firstLogin === true) {
                       // go to update admin password
                   } else {
                    this.router.navigate(['/dashboard']);
                    }
                   localStorage.setItem('isLoggedin', 'true');
                 },
               ()=>this.spinnerService.hide();
            );
        }

Live Demo

5
Vikas

Pour ceux qui recherchent toujours le chargement de spinner en angulaire, n'hésitez pas à regarder:

0
azatprog