Introducción

Una plantilla es un archivo en formato HTML con algunas adiciones típicas de Angular.

Al crear un componente, Angular CLI creará un archivo HTML. Este archivo es la parte de vista de la arquitectura MVC. El controlador y la vista están vinculados gracias al atributo templateUrls del decorador @Component del archivo TypeScript.

cd C:\JavaScriptYAngular\Angular\miProyectoAngular\  
ng generate component components/c09

// C:\JavaScriptYAngular\Angular\miProyectoAngular\src\app\ 
components\c09\c09.components.ts  
import { Component } from '@angular/core';  
  
@Component({  
  selector: 'app-c09',  
  templateUrl: './c09.component.html'  
})  
export class C09Component {  
}

Bootstrap

Bootstrap es el framework CSS más popular para desarrolladores que no tienen habilidades de diseño gráfico. Ayuda a ofrecer consistencia y un diseño elegante sin dificultad. Desarrollado en un primer momento por el equipo de programadores de Twitter, ahora lo utilizan miles de sitios web.

Por supuesto, hay un paquete Bootstrap disponible en el administrador de paquetes npm: https://www.npmjs.com/package/bootstrap. Para instalarlo, simplemente escriba los comandos correctos en el terminal correcto.

npm install --save boostrap  
npm install --save jquery

Para vincular Bootstrap al proyecto, dos soluciones:

Podemos añadir el CDN (Content Delivery Network) de Bootstrap en la etiqueta head del fichero index.html situado en el directorio src.
O añadir el directorio del módulo Bootstrap al parámetro styles del archivo angular.json.

El segundo método es más simple y permite seguir fácilmente las diferentes versiones actualizadas de Bootstrap. De hecho, la ruta de acceso al módulo es siempre la misma y la actualización del paquete npm conduce automáticamente a la actualización del marco en toda la aplicación.

{  
         "options": {  
           "outputPath": "dist/DBmanager",  
           "index":...

Interpolación

La interpolación es el acto, en una plantilla, de utilizar una variable definida en la clase TypeScript del controlador. Es una palabra complicada que se usa a menudo, pero que simplemente significa «mostrar datos de TypeScript en una plantilla».

// C:\JavaScriptYAngular\Angular\miProyectoAngular\src\app\ 
components\c09\c09.component.ts  
import { Component, OnInit } from '@angular/core';  
  
@Component({  
 selector: 'app-c09',  
 templateUrl: './c09.component.html',  
 styleUrls: ['./c09.component.css']  
})  
export class C09Component implements OnInit{  
  
 miVariableAMostrar = 'Una variable que enseñar';  
  
 constructor() { }  
  
 ngOnInit() {  
 }  
  
}

La clase C09Component contiene un atributo llamado miVariableAMostrar utilizable en la parte de plantilla del componente gracias a las llaves dobles {{ }}.

< !-- C:\JavaScriptYAngular\Angular\miProyectoAngular\src\app\ 
components\c09\c09.components.html -->  
<p>Interpolación : {{miVariableAMostrar}}</p>

La variable dentro de la clase TypeScript puede ser de cualquiera...

Eventos

Lidiar con un evento es precisamente lo contrario a la interpolación. Una acción en la plantilla desencadenará una acción en la clase del componente.

Muy a menudo es un botón que activa un evento, pero cualquier elemento HTML puede ser un detonador del evento.

<button (evento)="nombreDeLaFuncion()">textoDelBoton</button>

< !-- C:\JavaScriptYAngular\Angular\miProyectoAngular\src\app\ 
components\c09\c09.components.html -->  
<div class="container text-center">  
 <p>El componenteC09</p>  
 <button class="btn btn-primary"   
         (click)="unClic()">Un boton</button>  
</div>

El evento (click) ocurre cuando el usuario hace clic en el botón. Hay diferentes eventos y el desarrollador puede incluso crear otros. (click), (mouseover) y (mouseleave) son los más utilizados.

Todo lo que le queda por hacer a la clase TypeScript es crear un método que realizará una acción en respuesta al evento desencadenado.

// C:\JavaScriptYAngular\Angular\miProyectoAngular\src\app\ 
components\c09\c09.component.ts  
import { Component, OnInit } from '@angular/core';  
  
@Component({  
 selector: 'app-c09',  
 templateUrl:...

Directivas

Una directiva es un componente angular bastante especial, ya que no tiene ninguna plantilla. Hay cinco:

ngIf
ngFor
ngSwitch
ngClass
ngStyle

Aunque estas directivas se encuentran en la plantilla, de hecho son componentes. Hay dos tipos:

Las directivas estructurales, que modifican el DOM añadiendo, suprimiendo o modificando un elemento.
Las directivas de datos, que modifican la apariencia.

1. Directivas estructurales

a. Condiciones

La directiva ngIf le permite mostrar, o no, un elemento HTML de acuerdo con una condición.

<elementHTML *ngIf="unaCondicion"></elementHTML>

La condición debe devolver necesariamente verdadero o falso. Solo en el primer caso se mostrará el elemento HTML.

< !-- C:\JavaScriptYAngular\Angular\miProyectoAngular\src\app\ 
components\c09\c09.components.html  -->  
<div class="container text-center">  
 <p>El componente C09</p>  
 <button class="btn btn-primary"  
         (click)="unClic()">{{nombreDelBoton}}</button>  
 <p *ngIf="true">Este elemento se muestra</p>  
 <p *ngIf="false">Este elemento no se muestra </p>  
</div>

Cualquier operación matemática e incluso una función puede ser una condición de ngIf.

< !-- C:\JavaScriptYAngular\Angular\miProyectoAngular\src\app\ 
components\c09\c09.components.html  -->  
<div class="container text-center">  
 <p>El componente C09</p>  
 <button class="btn btn-primary"  
         (click)="unClic()">{{nombreDelBoton}}</button>  
 <p *ngIf="numeroDeClic%2 == 0">El botón ha sido clicado una 
cantidad par de veces</p>  
</div>

Si el desarrollador quiere mostrar algo cuando la condición es verdadera y algo más cuando la condición es falsa, debe recurrir a, al menos, dos ng-template.

<ng-template #nomDeLaTemplate>        <elementHTML></elementHTML>
</ng-template>

*ngIf entonces toma una forma ligeramente diferente.

<elementHTML *ngIf="unaCondicion ;...

Práctica

1. Enunciado

Desde la aplicación PokemonManager y los dos componentes creados en el capítulo Angular CLI - Componentes, muestre el componente generacionesen la página de inicio. Use su selector para colocarlo juiciosamente en el archivo app-component.html.

Cree un array llamado generaciones en el archivo generaciones.component.ts. Debe contener las siete generaciones de Pokémon, a saber:

Generación I
Generación II
Generación III
Generación IV
Generación V
Generación VI
Generación VII

En la plantilla generaciones.component.html, muestre la lista de generaciones. Use una directiva de estructura para mostrar el ensamblaje como una lista.

Para que todo sea más agradable de ver, use el framework CSS de Bulma, que integrará en la aplicación gracias a su paquete npm.

Listado de las diferentes generaciones de Pokémon

2. Corrección

index.html es el archivo que usa una aplicación Angular al navegar a la página de inicio. Este integra el selector app-root dentro de su etiqueta body y así permite la renderización del componente principal app-component.

Por supuesto, basta con que reemplace app-root por app-generaciones para mostrar el componente generaciones en la página de inicio de la aplicación. Para mantenerse dentro de lo que se consideran buenas prácticas, es preferible agregar en su lugar app-generaciones...

Plantillas