Angular: Templates= Variables de plantilla

 ¿Qué es un Template?

Un template en Angular es un fragmento de HTML que se utiliza para definir la estructura y el contenido visual de un componente. Los templates pueden incluir directivas, bindings (enlaces) de datos, pipes y elementos de HTML estándar. Los templates son fundamentales para definir la interfaz de usuario de las aplicaciones Angular.
Template syntax: https://angular.dev/guide/templates

 // Generando los componentes --inline-template
 ng generate component --inline-template templates  
 ng g c --inline-template templates
 
// Generamos sus componentes --inline-template --inline-style
ng g c --inline-template --inline-style templates/tipo-templates

Sintaxis de plantilla (template): En Angular, una *template* es un pedazo de HTML.

@Component({  Template: ´  ´ , styles: [`   `] })

 ¿Para qué sirve?  Los templates sirven para crear vistas (UI) dinámicas en las aplicaciones Angular. Permiten enlazar datos, reaccionar a eventos del usuario, y aplicar directivas y pipes para manipular la presentación y el comportamiento del contenido visual.

Recomencaciones al usar Template (plantilla): 

Al usar una expresión en el  Template, siga estas prácticas recomendadas

1.  Usar expresiones cortas: Para la prueba de codigos siempre que sea posible.
2. Ejecución rápida: Utilice nombres de propiedad o llamadas a métodos.
3. Mantenga la lógica de la aplicación y del negocio en el componente, donde sea accesible para desarrollar y probar.

@Component({
  template: ` <h3> {{ interpolación }} </h3> `,
  styles: [`h3 { color: blue; }`]
})

Tipos de Templates en Angular 

1. Templates Inline: se define dentro del decorador @Component.
   
2. Templates Externos: se define en un archivo HTML separado
   
3. Templates con Directivas Estructurales: Utilizan directivas como *ngIf y *ngFor
   
4. Templates con Bindings de Datos: Vinculan datos del componente (Bindings = Enlace ).
   
5. Templates con Pipes: Transforman los datos antes de mostrarlos.
   

Videotutoriales: 

1. Variables de plantilla (template variables): https://youtu.be/FjcDYajRkl0
2. Plantillas HTML - Primera Parte https://youtu.be/R9KQjXECuEA
   
3. Plantillas HTML - Segunda Parte https://youtu.be/9NXhwn2mWPM
   
4.  
   

 IMPORTANTE: Para eliminar el riesgo de ataques de inyección de script, Angular no apoya el elemento <script> en plantillas. Angular ignora el etiqueta <script> y da una advertencia a la consola del navegador.

Ejemplos de Cada Template

1- Template Inline: se define directamente dentro del decorador @Component.

// inline-template.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-inline-template',
  standalone: true,
  imports: [],
  template: ` <h3> Esto es un  {{ name1 }}, con interpolación !</h3> `,
  styles: [`h3 { color: red; }`]
})
export class InlineTemplateComponent {
    name1 = 'Template Inline en Angular';
}

2- Template Externo: se define en un archivo HTML separado y se referencia desde el decorador @Component.

//  external-template.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-external-template',
  standalone: true,
  imports: [],
  templateUrl: './external-template.component.html',
  styles: [`h3 { color: green; }`]
})
export class ExternalTemplateComponent {
  name2 = 'Template Externo en Angular'; 
}

Archivo de Template (external-template.component.html):

 <!-- external-template.component.html -->
<h3> Esto es un  {{ name2 }}, con On way data binding ! </h3>

3- Template con Directivas Estructurales: Utilizan directivas como *ngIf y *ngFor para modificar el DOM.

 // structural-directives-template.component.ts
import { Component } from '@angular/core';
// Agregando la Directiva CommonModule para hacer uso del ngIf, ngFor, y ngClass,...
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-structural-directives-template',
  standalone: true,
  // Confirmando que hemos agregado el componente: CommonModule
  imports: [CommonModule, ],
  template: `
    <h3 ngif="isVisible">Template con Directivas Estructurales</h3>
    <ul>
      <li ngfor="let item of items">{{ item }}</li>
    </ul>
  `,
  styles: [`h3,li  {color: blue;} `]
})
export class StructuralDirectivesTemplateComponent {
    isVisible = true;
    items = ['Item 1', 'Item 2', 'Item 3'];
}

4- Template con Bindings de Datos: Vinculan datos del componente a la vista.
Componente:

 // data-binding-template.component.ts
import { Component } from '@angular/core';
// Agregando la Directiva FormsModule para hacer uso del [(ngModel)],...
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-data-binding-template',
  standalone: true,
  // Agregando y confirmando que utilizaremos el FormsModule
  imports: [ FormsModule ],
  template: ` <h3>Template con Bindings de Datos: Two-way data binding</h3>
        <input name3="" ngmodel="" /p>
        <p>Hello, {{ name3 }}!</p>
  `,
  styles: [`h3 { color: brown; }`]
})
export class DataBindingTemplateComponent {
    name3 = '';
}

5- Template con Pipes: Transforman los datos antes de mostrarlos.

// pipes-template.component.ts
import { Component } from '@angular/core';
// Agregando Built-in pipes (DatePipe, CurrencyPipe, UpperCasePipe, LowerCasePipe. etc.)
import { CurrencyPipe, DatePipe, LowerCasePipe, UpperCasePipe } from '@angular/common';

@Component({
  selector: 'app-pipes-template',
  standalone: true,
  imports: [ DatePipe, CurrencyPipe, UpperCasePipe, LowerCasePipe],
  template: ` 
  	<h3> Template con Pipes: Built-in pipes (DatePipe, CurrencyPipe, UpperCasePipe) </h3>
    <p>{{ amount | currency:'USD' }}</p>
    <p>Date: {{ today | date }}</p>
    <p>The (date:'fullDate' | uppercase): {{  birthday | date:'fullDate' | uppercase }}</p>
    <p>The (date:'dd/mm/yyyy' | lowercase): {{ birthday | date:'dd/mm/yyyy' | lowercase }}</p>
  `,
  styles: [`h3, p  {color: purple;} `]
})
export class PipesTemplateComponent {
  amount = 12345.67;  
  today = new Date();
  birthday = new Date();
}

 

APP: Estructura de un Proyecto Angular con los tipos de Templates

practica2/
├── src/
│   ├── app/
│   │   ├── templates/
│   │   │   └── inline-template.component.ts
│   │   │   └── external-template.component.ts
│   │   │   └── external-template.component.html
│   │   │   └── structural-directives-template.component.ts
│   │   │   └── data-binding-template.component.ts
│   │   │   └── pipes-template.component.ts
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   ├── app.component.css
│   ├── assets/
│   ├── environments/
│   ├── index.html
│   ├── main.ts
│   ├── styles.css
│   └── polyfills.ts
├── angular.json
├── package.json
├── README.md
└── tsconfig.json

 

APP: Creando nuevo proyecto = Practica2

 // Creando nuevo proyecto = Practica2
C:\ANGULAR-v18\Cmder_Consola                                                     
 ng new practica2    
  // Seleccionando nuestra preferencia de estilos css y Servidor.                               
	stylesheet format  to use? CSS         
	enable Server-Side Rendering (SSR)? yes   

 // Entrando a la directiva o carpeta del proyecto creado
 cd practica2                                                        
  			
C:\ANGULAR-v18\Cmder_Consola\practica2 (master) 
// Abriendo proyecto (APP= Practica2) en editor Visual estudio code	
 code .                                                              
 
 // Generando los componentes --inline-template
 ng generate component --inline-template templates  
 
 // Generando los componentes del tipo: --inline-template --inline-style
 ng g c --inline-template --inline-style templates/tipo-templates
  
 // Generando tipo: inline-template --inline-style
 ng g c --inline-template --inline-style templates/tipo-templates/inline-template    

// Generando tipo: external-template = componente normal generado por consola
 ng generate component templates/tipo-templates/external-template               
 
 // Generando tipo: data-binding-template
 ng g c --inline-template --inline-style templates/tipo-templates/data-binding-template      
 
 // Generando tipo: structural-directives-template
 ng g c --inline-template --inline-style templates/tipo-templates/structural-directives-template    

// Generando tipo: pipes-template
 ng g c --inline-template --inline-style templates/tipo-templates/pipes-template

 

Importación de cada componente Template

  // tipo-templates.component.ts
import { Component } from '@angular/core';
//  Agregando los Tipos de Templates 
import { InlineTemplateComponent } from './inline-template/inline-template.component';
import { ExternalTemplateComponent } from './external-template/external-template.component';
import { StructuralDirectivesTemplateComponent } 
	from './structural-directives-template/structural-directives-template.component';
import { DataBindingTemplateComponent } 
	from './data-binding-template/data-binding-template.component';
import  {PipesTemplateComponent } from './pipes-template/pipes-template.component'

@Component({
  selector: 'app-tipo-templates',
  standalone: true,
  // Declarando o confirmando el uso de componentes templates
  imports: [InlineTemplateComponent, ExternalTemplateComponent, 
            StructuralDirectivesTemplateComponent, DataBindingTemplateComponent, 
            PipesTemplateComponent ],
  template: `
    <h1> Tipo de componente: </h1>

        <app-inline-template />
    
        <app-external-template />
    
        <app-structural-directives-template />
    
        <app-data-binding-template />
    
        <app-pipes-template />
  `,
  styles: [`h1 { color: #4d042d; }`]
})
export class TipoTemplateComponent {  }

// templates.component.ts
import { Component } from '@angular/core';
// Agregando Modulo personalizado de tipos de componentes
import { TipoTemplateComponent } from './tipo-templates/tipo-templates.component';

@Component({
  selector: 'app-templates',
  standalone: true,
  // Declarando el modulo agregado
  imports: [ TipoTemplateComponent, ],
  templateUrl: './templates.component.html',
  styleUrl: './templates.component.css'
})
export class TemplatesComponent {  }

// app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
// Importando el componente Personalizado TemplatesComponent,...
import { TemplatesComponent } from './templates/templates.component'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, TemplatesComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'practica2';
}

..