Introducción

Angular es una plataforma de desarrollo para crear aplicaciones WEB, móviles y de escritorio utilizando HTML, CSS y TypeScript (JavaScript). Actualmente, Angular se encuentra en la versión 14 y Google es el principal mantenedor del proyecto.

ngx-spinner es una biblioteca de componentes de carga (spinner) con más de 50 tipos diferentes.

requisitos previos

Antes de comenzar, debe instalar y configurar las herramientas:

• git
• Node.js y npm
• CLI angular
• IDE (por ejemplo , código de Visual Studio )

Empezando

Crear la aplicación angular

1. Vamos a crear la aplicación con la estructura base Angular usando @angular/cli con el archivo de ruta y el formato de estilo SCSS

 ng new angular-spinner ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ] CREATE angular-spinner/README.md (1060 bytes) CREATE angular-spinner/.editorconfig (274 bytes) CREATE angular-spinner/.gitignore (604 bytes) CREATE angular-spinner/angular.json (3261 bytes) CREATE angular-spinner/package.json (1077 bytes) CREATE angular-spinner/tsconfig.json (783 bytes) CREATE angular-spinner/.browserslistrc (703 bytes) CREATE angular-spinner/karma.conf.js (1432 bytes) CREATE angular-spinner/tsconfig.app.json (287 bytes) CREATE angular-spinner/tsconfig.spec.json (333 bytes) CREATE angular-spinner/src/favicon.ico (948 bytes) CREATE angular-spinner/src/index.html (300 bytes) CREATE angular-spinner/src/main.ts (372 bytes) CREATE angular-spinner/src/polyfills.ts (2820 bytes) CREATE angular-spinner/src/styles.scss (80 bytes) CREATE angular-spinner/src/test.ts (788 bytes) CREATE angular-spinner/src/assets/.gitkeep (0 bytes) CREATE angular-spinner/src/environments/environment.prod.ts (51 bytes) CREATE angular-spinner/src/environments/environment.ts (658 bytes) CREATE angular-spinner/src/app/app-routing.module.ts (245 bytes) CREATE angular-spinner/src/app/app.module.ts (393 bytes) CREATE angular-spinner/src/app/app.component.scss (0 bytes) CREATE angular-spinner/src/app/app.component.html (24617 bytes) CREATE angular-spinner/src/app/app.component.spec.ts (1100 bytes) CREATE angular-spinner/src/app/app.component.ts (220 bytes) ✔ Packages installed successfully.

2. Instale y configure el marco Bootstrap CSS. Luego, realice los pasos 2 y 3 de la publicación, Agregar el marco CSS de Bootstrap a una aplicación Angular .

3. Instale la biblioteca ngx-spinner .

 npm install ngx-spinner

4. Importe los BrowserAnimationsModule , FormsModule y NgxSpinnerModule . Configure los ajustes de registro. Cambie el archivo app.module.ts y agregue las líneas de la siguiente manera:

 import { FormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgxSpinnerModule } from 'ngx-spinner'; imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, NgxSpinnerModule, AppRoutingModule, ],

5. Elimine el contenido de la clase AppComponent del archivo src/app/app.component.ts . Importe el servicio NgxSpinnerService y cree el método showSpinner como se muestra a continuación:

 import { Component } from '@angular/core'; import { NgxSpinnerService } from 'ngx-spinner'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent { typeSelected: string; constructor(private spinnerService: NgxSpinnerService) { this.typeSelected = 'ball-fussion'; } public showSpinner(): void { this.spinnerService.show(); setTimeout(() => { this.spinnerService.hide(); }, 5000); // 5 seconds } }

6. Elimine el contenido del archivo src/app/app.component.html . Agregue el componente ngx-spinner y las opciones de spinners como se muestra a continuación:

 <div class="container-fluid py-3"> <h1>Angular Spinner</h1> <div class="d-grid gap-2 col-4 mt-4 mx-auto"> <select name="type" #type="ngModel" [(ngModel)]="typeSelected" required [class.is-invalid]="type.invalid && (type.dirty || type.touched)" class="form-select form-select-sm"> <option value="ball-8bits">Ball 8bits</option> <option value="ball-atom">Ball Atom</option> <option value="ball-beat">Ball Beat</option> <option value="ball-circus">Ball Circus</option> <option value="ball-climbing-dot">Ball Climbing Dot</option> <option value="ball-clip-rotate">Ball Clip Rotate</option> <option value="ball-clip-rotate-multiple">Ball Clip Rotate Multiple</option> <option value="ball-clip-rotate-pulse">Ball Clip Rotate Pulse</option> <option value="ball-elastic-dots">Ball Elastic Dots</option> <option value="ball-fall">Ball Fall</option> <option value="ball-fussion">Ball Fussion</option> <option value="ball-grid-beat">Ball Grid Beat</option> <option value="ball-grid-pulse">Ball Grid Pulse</option> <option value="ball-newton-cradle">Ball Newton Cradle</option> <option value="ball-pulse">Ball Pulse</option> <option value="ball-pulse-rise">Ball Pulse Rise</option> <option value="ball-pulse-sync">Ball Pulse Sync</option> <option value="ball-rotate">Ball Rotate</option> <option value="ball-running-dots">Ball Running Dots</option> <option value="ball-scale">Ball Scale</option> <option value="ball-scale-multiple">Ball Scale Multiple</option> <option value="ball-scale-pulse">Ball Scale Pulse</option> <option value="ball-scale-ripple">Ball Scale Ripple</option> <option value="ball-scale-ripple-multiple">Ball Scale Ripple Multiple</option> <option value="ball-spin">Ball Spin</option> <option value="ball-spin-clockwise">Ball Spin Clockwise</option> <option value="ball-spin-clockwise-fade">Ball Spin Clockwise Fade</option> <option value="ball-spin-clockwise-fade-rotating">Ball Spin Clockwise Fade Rotating</option> <option value="ball-spin-fade">Ball Spin Fade</option> <option value="ball-spin-fade-rotating">Ball Spin Fade Rotating</option> <option value="ball-spin-rotate">Ball Spin Rotate</option> <option value="ball-square-clockwise-spin">Ball Square Clockwise Spin</option> <option value="ball-square-spin">Ball Square Spin</option> <option value="ball-triangle-path">Ball Triangle Path</option> <option value="ball-zig-zag">Ball Zig Zag</option> <option value="ball-zig-zag-deflect">Ball Zig Zag Deflect</option> <option value="cog">Cog</option> <option value="cube-transition">Cube Transition</option> <option value="fire">Fire</option> <option value="line-scale">Line Scale</option> <option value="line-scale-party">Line Scale Party</option> <option value="line-scale-pulse-out">Line Scale Pulse Out</option> <option value="line-scale-pulse-out-rapid">Line Scale Pulse Out Rapid</option> <option value="line-spin-clockwise-fade">Line Spin Clockwise Fade</option> <option value="line-spin-clockwise-fade-rotating">Line Spin Clockwise Fade Rotating</option> <option value="line-spin-fade">Line Spin Fade</option> <option value="line-spin-fade-rotating">Line Spin Fade Rotating</option> <option value="pacman">Pacman</option> <option value="square-jelly-box">Square Jelly Box</option> <option value="square-loader">Square Loader</option> <option value="square-spin">Square Spin</option> <option value="timer">Timer</option> <option value="triangle-skew-spin">Triangle Skew Spin</option> </select> <div *ngIf="type.invalid && (type.dirty || type.touched)" class="invalid-feedback"> <div *ngIf="type.errors?.required">This field is required.</div> </div> <button type="button" class="btn btn-sm btn-primary" (click)="showSpinner()">Show Spinner</button> </div> </div> <ngx-spinner size="medium" [type]="typeSelected"></ngx-spinner>

7. Ejecute la aplicación con el siguiente comando:

 npm start > [email protected] start > ng serve ✔ Browser application bundle generation complete. Initial Chunk Files | Names | Size vendor.js | vendor | 2.79 MB styles.css | styles | 266.58 kB polyfills.js | polyfills | 128.51 kB scripts.js | scripts | 76.67 kB main.js | main | 11.04 kB runtime.js | runtime | 6.63 kB | Initial Total | 3.27 MB Build at: 2021-09-07T01:43:42.126Z - Hash: 52e507be2073bee125a1 - Time: 5289ms ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** ✔ Compiled successfully.

8. ¡Listo! Acceda a la URL http://localhost:4200/ y compruebe si la aplicación funciona. Vea cómo funciona la aplicación en GitHub Pages y Stackblitz .

El repositorio de aplicaciones está disponible en https://github.com/rodrigokamada/angular-spinner .

Este tutorial fue publicado en mi blog en portugués.