Comment montrer spinner angulaire 6

Je suis nouveau sur angulaire et de développement web, mais capable de concevoir différentes pages web et obtenu des données à partir du serveur à l'aide de HTTP module client.

Tandis que l'extraction de données à partir du serveur, je veux montrer les progrès spinner, mais je ne suis pas en mesure de le faire. J'ai cherché sur google mais rien ne m'a fait faire. Merci de m'aider à atteindre cet objectif.

Code:

de connexion.composante.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');
             }
        );
    }

<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, quand je fais une demande d'signIn service, je veux montrer l'spinner, s'il vous Plaît aidez-moi, comment puis-je le faire?

Je sais que c'est simple pour beaucoup de développeurs ici, mais pour moi Il est un peu difficile.

Veuillez fermer votre question en cliquant sur la coche à gauche de la réponse qui vous a aidé le plus

InformationsquelleAutor Anil | 2018-06-23

6

Ajouter la touche de navigation dans votre code HTML, comme ceci:
```
<img *ngIf="loading" src="assets/my-spinner.gif" /> 
```
Puis, dans votre texte tapé à la Machine, vous devez créer une variable appelée loading, et de le définir comme:
```
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');
         }
    );
}
```
Ce sera mis en loading vrai que le service est dans l'action
- Si j'ajoute comme cela, encore une fois je dois considérer le placement de l'gif droit?
- Qu'est-ce que vous voulez réaliser? Vous pouvez le placer à l'aide de CSS
- Je veux montrer au-dessus de la page ouverte..juste comme superposition
- Ouais, l'utilisation de CSS. Voici un exemple de base stackblitz.com/edit/... cliquez Simplement sur le bouton pour voir le spinner
InformationsquelleAutor user184994

Vous pouvez utiliser cg4-chargement-spinner

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

Module d'Import à la racine de votre application module

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

Faire une déclaration d'importation de l'

 imports: [ Ng4LoadingSpinnerModule.forRoot() ]

Inclure spinner composant à la racine de votre niveau composant.

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

utilisation show() et hide() à l'intérieur de subscribe rappel

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();
            );
        }

Démo

Salut @Vikas j'ai utilisé celui-ci, mais lorsque j'essaie d'importer dans mon application.module je suis Error: "Fetch error: 404 Not Found Instantiating http://localhost:[..]/ng4-loading-spinner Loading http://localhost:[..]/client/app/app.module.js Loading client/main.js" - je utiliser Angulaire 5 qui devrait être pris en charge selon la doc

InformationsquelleAutor Vikas

0

Pour ceux qui ont encore de recherche pour le chargement spinner angulaire, n'hésitez pas à regarder:
- si vous avez besoin seulement de chargement initial juste un coup d'oeil: Comment Style Angulaire Chargement de l'Application Angulaire de la CLI Comme un
  Boss par Tomas.
- si vous souhaitez vérifier tous les quatre façons de chargement de spinner ici, vous allez:
  
  Les Quatre façons de Créer de Chargement Toupies dans Angulaire App par Cristian.
InformationsquelleAutor azatprog

Vous devez vous connecter pour publier un commentaire.