Proyectos

Bucles ngFor y listados en las vistas de Angular 5

Lo 1 sera crearnos nuestro array en nuestro componente anteriormente creado.

¿ Como lo recorremos ?

Así motraremos todos los videojuegos en nuestro html.

 

Ver

Anuncios

Directiva condicional ngIf Angular 5


 

Para hacer un If en Angular 5 nos creamos una nueva propiedad en nuestra clase  VideojuegosComponent  lo que vamos hacer es creanos una variable puesta a true;

Ahora podemos decirle que if  –>

<h3 *ngIf= “mostrar_retro != true “>
El mejor juego es : true
</h3>
Mostrara la propiedad en nuestro html. Podemos tambien jugar con la propiedad style para que nos colore la linea que queremos .
<h3 [style.background]=”‘red'”
*ngIf=”mostrar_retro”>
El mejor juego es : false
</h3>

 

Angular 5

 

Para empezar os comento que yo utilizo Visual Code que os lo podéis descargar directamente desde Aquí.

Una vez descargado podréis seguir este tutorial tan bien explicado de Victor Robles.

Paso 0. Instalar la última versión de NodeJS, para eso entraremos a su web oficial y descargaremos el instalador más actualizado https://nodejs.org/es/

Paso 1. Desinstalar los paquetes anteriores de Angular CLI

1
2
npm uninstall -g angular-cli
npm uninstall -g @angular/cli

Paso 2. Vaciar la caché del gestor de paquetes npm

1
npm cache clean

Paso 3. Instalar la última versión de Angular CLI

1
npm install -g @angular/cli@latest

Ahora ya tenemos actualizado Angular CLI y ya podemos generar un nuevo proyecto de Angular 5

1
2
3
ng new NOMBRE_DEL_PROYECTO_ANGULAR5
cd new NOMBRE_DEL_PROYECTO_ANGULAR5
ng serve

Puedes comprobar la versión de Angular que tienes dentro del fichero package.json, podrás comprobar que tienes la versión 5. En el caso de que te interese otra versión podrías modificar las versiones de tu fichero package.json y lanzar el comando npm update.

Con esto ya sabemos como actualizar Angular CLI para instalar Angular 5, como instalar el framework y como usar Angular CLI para generar un proyecto base.

Ahora tendremos disponible la webapp de Angular 5 en http://localhost:4200/

victorroblesweb.es