Header Ads Widget

Ticker

6/recent/ticker-posts

Ejemplo de calificación angular de 10 estrellas

 En este tutorial, crearemos un componente de clasificación por estrellas con la última versión de Angular 10 y Bootstrap.

La calificación por estrellas es una característica común en las recomendaciones de productos y los sitios web de comercio electrónico.

Normalmente puntuamos entre cero y cinco estrellas.

Antes de comenzar, necesita algunos requisitos previos:

  • Conocimientos básicos de TypeScript. En particular, la familiaridad con conceptos orientados a objetos como clases y decoradores de TypeScript.
  • Una máquina de desarrollo local con Node 10+ , junto con NPM 6+ instalado. La CLI de Angular requiere un nodo como la mayoría de las herramientas frontend en la actualidad. Simplemente puede ir a la página de descargas del sitio web oficial y descargar los binarios para su sistema operativo. También puede consultar las instrucciones específicas de su sistema sobre cómo instalar Node usando un administrador de paquetes. Sin embargo, la forma recomendada es usar NVM - Node Version Manager - un script bash compatible con POSIX para administrar múltiples versiones activas de Node.js.

Nota : Si no desea instalar un entorno local para el desarrollo de Angular pero aún desea probar el código en este tutorial, puede usar Stackblitz , un IDE en línea para el desarrollo de frontend que puede usar para crear un proyecto Angular compatible con Angular. CLI.

Paso 1: instalación de Angular CLI 10

Comencemos instalando la última versión de Angular CLI 10 (en el momento de escribir este tutorial).

Angular CLI es la herramienta oficial para inicializar y trabajar con proyectos Angular. Para instalarlo, abra una nueva interfaz de línea de comandos y ejecute el siguiente comando:

$ npm install -g @angular/cli

En el momento de escribir este tutorial, angular / cli v10 estará instalado en su sistema.

Paso 2: creación de una nueva aplicación de Angular 10

En el segundo paso, creemos nuestro proyecto. Regrese a su interfaz de línea de comandos y ejecute los siguientes comandos:

$ cd ~
$ ng new angular10star-rating

La CLI le hará un par de preguntas: ¿ Si desea agregar enrutamiento angular? Escriba y para Sí y ¿Qué formato de hoja de estilo le gustaría usar? Elija CSS .

A continuación, navegue hasta la carpeta de su proyecto y ejecute el servidor de desarrollo local usando los siguientes comandos:

$ cd angular10star-rating
$ ng serve    

Abra su navegador web y navegue hasta la http://localhost:4200/dirección para ver su aplicación en ejecución.

Paso 3: Instalación de Ng-Bootstrap

A continuación, necesitamos instalar ng-bootstrapusando el siguiente comando:

$ ng add @ng-bootstrap/ng-bootstrap

Esta biblioteca proporciona una implementación angular para Bootstrap 4 y también proporciona algunos componentes útiles como NgbRating , una directiva que le permite mostrar la barra de clasificación de estrellas.

Abra el src/app/app.component.tsarchivo y actualícelo de la siguiente manera:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  currentRate = 0;
}

A continuación, abra el src/app/app.component.htmlarchivo y actualícelo de la siguiente manera:

<h1 class="text-primary">
Angular 10 Start Rating Example
</h1>
<ngb-rating [max]="5" [(rate)]="currentRate" [readonly]="false"></ngb-rating>
<p>Rate: </p>

A continuación, abra el src/app/app.component.cssarchivo y agregue los siguientes estilos CSS:

ngb-rating {
  font-size: 100px;
  color:brown;
  background: rgba(23, 221, 16, 0.815);
}

Esta es una captura de pantalla de la salida:

Clasificación angular de 10 estrellas

Puede encontrar este ejemplo en https://stackblitz.com/edit/angular-10-star-rating-example

Conclusión

En este breve artículo, hemos visto cómo crear un componente de calificación de estrellas con Angular 10 y ng-bootstrapLea los documentos oficiales para obtener más detalles.

Publicar un comentario

0 Comentarios