+ {{ pageTitle }}
+
+
+
+
+
+
+ 
+
+
+
+ | Review | +Username | +Text | +
|---|---|---|
| {{ review.title }} | +{{ review.userName }} | +{{ review.text }} | +
| Avatar | +Id | +Name | +
|---|---|---|
| + + | ++ xxxxxxxx + | ++ xxxxxxxx + | +
| Avatar | +Id | +Name | +
|---|---|---|
|
+- |
+- +- xxxxxxxx +- | +-+- xxxxxxxx +- | +-
|
++ |
++ ++ {{member.id}} ++ | ++++ {{member.login}} ++ | ++
| Avatar | ++Avatar | +Id | +Name | +
|---|---|---|---|
|
+ |
+ + {{member.id}} + | ++ {{member.login}} + | +
menu works!
++menu works!
+``` + +Angular aplicará la directiva tanto al `th` del listado de usuarios como al `p` del menú. + +- Programamos la directiva + +La potencia que tienen las directivas de atributo es que Angular les puede pasar como argumento del constructor una _referencia_ al elemento sobre el que se está aplicando. + +_src/app/directives/highlight.ts_ + +```diff +- import { Directive } from '@angular/core'; ++ import { Directive, ElementRef } from '@angular/core'; + +@Directive({ + selector: '[appHighlight]', + standalone: true +}) +export class HighlightDirective { + +- constructor() { } ++ constructor(el: ElementRef) { } + +} +``` + +De esta forma, tendremos en la variable _el_ una referencia al elemento th en el caso del listado de usuarios y una referencia al elemento p en el caso del menú. + +`ElementRef` tiene una única propiedad, _nativeElement_, que nos da acceso al elemento en sí. A través de _nativeElement_ podemos acceder y modificar cualquier atributo de elemento en cuestión. + +Vamos a modificar el valor de `style.backgroundColor`: + +_src/app/directives/highlight.ts_ + +```diff +import { Directive, ElementRef } from '@angular/core'; + +@Directive({ + selector: '[appHighlight]', + standalone: true, +}) +export class Highlight { + +- constructor(el: ElementRef) { } ++ constructor(el: ElementRef) { ++ (el.nativeElement as HTMLElement).style.backgroundColor = 'lightblue'; ++ } + +} +``` + +Si miramos el navegador veremos que Angular a cambiado el valor de `style.backgroundColor` a todos los elementos que tengan el atributo _appHighlight_. + +- Modificar la directiva para que solamente se resalte cuando pongamos el ratón encima del elemento + +Vamos a reescribir la directiva para que los elementos no estén resaltados de inicio, sino que se resalten cuando el ratón se ponga encima de ellos. + +Para ello, desde la directiva vamos a escuchar el evento _mouseenter_ de los elementos afectados por la directiva. + +Esto lo hacemos con el decorador **@HostListener**. Este decorador configura un método para ser el _listener_ de un evento ocurrido en el elemento del DOM que haga de anfitrión (_host_) de la directiva. + +```diff +- import { Directive, ElementRef } from '@angular/core'; ++ import { Directive, ElementRef, HostListener } from '@angular/core'; + +@Directive({ + selector: '[appHighlight]', + standalone: true, +}) +export class HighlightDirective { + +- constructor(el: ElementRef) { ++ constructor(public el: ElementRef) { +- (el.nativeElement as HTMLElement).style.backgroundColor = 'lightblue'; + } + ++ @HostListener('mouseenter') ++ onMouseEnterEvent() { ++ (this.el.nativeElement as HTMLElement).style.backgroundColor = 'lightblue'; ++ } + +} +``` + +Y para que desde `onMouseEnterEvent()` podamos acceder a la referencia (_el_) que llega a través del constructor, almacenamos la variable _el_ en una propiedad de la clase. + +```diff +import { Directive, ElementRef, HostListener } from '@angular/core'; + +@Directive({ + selector: '[appHighlight]', + standalone: true, +}) +export class HighlightDirective { + ++ private el: ElementRef; + constructor(el: ElementRef) { ++ this.el = el; + } + + @HostListener('mouseenter') + onMouseEnterEvent() { +- el.nativeElement.style.backgroundColor = 'lightblue'; ++ (this.el.nativeElement as HTMLElement).style.backgroundColor = 'lightblue'; + } + +} +``` + +Aprovechándonos de los **constructores breves** que nos aporta el lenguaje typescript, podemos ahorrarnos un par de líneas en el código si indicamos la visibilidad (public/private) en el propio argumento del constructor + +```diff +import { Directive, ElementRef, HostListener } from '@angular/core'; + +@Directive({ + selector: '[appHighlight]', + standalone: true, +}) +export class Highlight { + +- private el: ElementRef; +- constructor(el: ElementRef) { +- this.el = el; +- } + ++ constructor(private el: ElementRef) { } + + @HostListener('mouseenter') + onMouseEnterEvent() { + (this.el.nativeElement as HTMLElement).style.backgroundColor = 'lightblue'; + } + +} +``` + +Podemos comprobar que los elementos se resaltan cuando el ratón se ponga encima del elemento. + +- Modificar la directiva para que solamente se resalte cuando pongamos el ratón encima del elemento + +De forma análoga podemos programar que el elemento deje de estar resaltado cuando el ratón salga del área ocupada por el elemento. + +```diff +import { Directive, ElementRef, HostListener } from '@angular/core'; + +@Directive({ + selector: '[appHighlight]', + standalone: true, +}) +export class Highlight { + + constructor(private el: ElementRef) { } + + @HostListener('mouseenter') + onMouseEnterEvent() { + (this.el.nativeElement as HTMLElement).style.backgroundColor = 'lightblue'; + } ++ ++ @HostListener('mouseleave') ++ onMouseLeaveEvent() { ++ this.el.nativeElement.style.backgroundColor = ''; ++ } ++ +} +``` + +- Refactorización + +Quitamos algo de código repetido y nos llevamos ese _magic value_ que es 'lightblue' a un lugar que sea más accesible y rápido de identificar. + + +```diff +import { Directive, ElementRef, HostListener } from '@angular/core'; + +@Directive({ + selector: '[appHighlight]', + standalone: true, +}) +export class Highlight { + ++ color = 'lightblue'; + constructor(private el: ElementRef) { } + ++ private highlight(color: string) { ++ (this.el.nativeElement as HTMLElement).style.backgroundColor = color; ++ } + + @HostListener('mouseenter') + onMouseEnterEvent() { +- (this.el.nativeElement as HTMLElement).style.backgroundColor = 'lightblue'; ++ this.highlight(this.color); + } + + @HostListener('mouseleave') + onMouseLeaveEvent() { +- (this.el.nativeElement as HTMLElement).style.backgroundColor = ''; ++ this.highlight(''); + } + +} +``` + +- Aplicamos el decorador @Input para parametrizar el color de resaltado + +Con otro decorador llamado @Input podemos configurar una propiedad de nuestra clase HighlightDirective para que su valor pueda ser establecido desde fuera. + +```diff +- import { Directive, ElementRef, HostListener } from '@angular/core'; ++ import { Directive, ElementRef, HostListener, Input } from '@angular/core'; + +@Directive({ + selector: '[appHighlight]' +}) +export class Highlight { + +- color = 'lightblue'; ++ @Input() ++ public color!: string; + + constructor(private el: ElementRef) { } + + private highlight(color: string) { + (this.el.nativeElement as HTMLElement).style.backgroundColor = color; + } + + @HostListener('mouseenter') + onMouseEnterEvent() { + this.highlight(this.color); + } + + @HostListener('mouseleave') + onMouseLeaveEvent() { + this.highlight(''); + } + +} +``` + +Este decorador `@Input` hace que los elementos afectados por `appHighlight` dispongan de un nuevo atributo, llamado _color_ (mismo nombre que la propiedad decorada con `@Input`). El valor del atributo color en el html se establecerá como valor de la propiedad en la directiva. + +_src/app/user/user-list/user-list.component.html_ + +```diff +| Avatar | ++Avatar | +Id | +Name | +
|---|---|---|---|
|
+ |
+ + {{ member.id }} + | ++ {{ member.login }} + | +
menu works!
++menu works!
+``` + +Turno de probarlo. + +- Ponemos un color por defecto + +Con un poco de javascript podemos elegir un color por defecto en caso de que no se haya usado el atributo color. + +```diff +@Directive({ + selector: '[appHighlight]', + standalone: true, +}) +export class HighlightDirective { + + @Input() + public color!: string; + ++ private defaultColor = 'lightblue'; + + constructor(private el: ElementRef) { } + + private highlight(color: string) { + (this.el.nativeElement as HTMLElement).style.backgroundColor = color; + } + + @HostListener('mouseenter') + onMouseEnterEvent() { +- this.highlight(this.color); ++ this.highlight(this.color || this.defaultColor); + } + + @HostListener('mouseleave') + onMouseLeaveEvent() { + this.highlight(''); + } + +} +``` + +Podemos tener tantas propiedades decoradas con `@Input()` como queramos. + +Cabe recordar que podemos utilizar binding en el html para asociar propiedades/atributos con propiedades del typescript del componente: + +_src/app/layout/menu/menu.component.html_ + +```diff +-menu works!
++menu works!
+``` + +_src/app/layout/menu/menu.component.ts_ + +```ts +import { Component } from '@angular/core'; +import { Highlight } from '../../directives/highlight.directive'; + +@Component({ + selector: 'app-menu', + standalone: true, + imports: [Highlight], + templateUrl: './menu.component.html', + styleUrl: './menu.component.css', +}) +export class MenuComponent { + /*diff*/ + public variableColorEnElTS = 'pink'; + /*diff*/ +} + +``` + +Así hacemos que sea el typescript del componente el que decida cuál es el color con el que la directiva debe resaltar el elemento. + +- Aprovechar el propio atributo de la directiva como `@Input` para el color. + +El decorador `@Input` permite realizar la asociación aunque los nombres del atributo html y de la propiedad de la directiva no coincidan. Por ejemplo: + +_src/app/layout/menu/menu.component.html_ + +```diff +-menu works!
+-menu works!
++menu works!
+``` + +```diff +export class Highlight { + ++ @Input('colorResaltado') + public color!: string; +``` + +Esto se suele utilizar para aprovechar el propio atributo `appHighlight` para pasar uno de los parámetros que tengamos con @Input. + +_src/app/layout/menu/menu.component.html_ + +```diff +-menu works!
++menu works!
+``` + +```diff +import { Directive, ElementRef, HostListener, Input } from '@angular/core'; + +@Directive({ + selector: '[appHighlight]', + standalone: true, +}) +export class Highlight { + +- @Input() ++ @Input('appHighlight') + public color; + + private defaultColor = 'lightblue'; + + constructor(private el: ElementRef) { } + + private highlight(color: string) { + this.el.nativeElement.style.backgroundColor = color; + } + + @HostListener('mouseenter') + onMouseEnterEvent() { + this.highlight(this.color || this.defaultColor); + } + + @HostListener('mouseleave') + onMouseLeaveEvent() { + this.highlight(''); + } + +} +``` diff --git a/04-frameworks/02-angular/version-20/04-template-forms/readme_es.md b/04-frameworks/02-angular/version-20/04-template-forms/readme_es.md new file mode 100644 index 000000000..18a9baef2 --- /dev/null +++ b/04-frameworks/02-angular/version-20/04-template-forms/readme_es.md @@ -0,0 +1,410 @@ +# 03 Template Forms + +## Resumen + +Este ejemplo toma como punto de partida el ejemplo 02. + +Vamos a crear un formulario para añadir miembros a la lista. + +Qué vamos a aprender en este ejemplo: + +- Formularios template-driven +- La directiva `ngModel` +- Directivas de atributo para validaciones +- Variables de plantilla +- Resaltar con CSS los campos no válidos +- Mostrar mensajes de error + +Pasos: + +## Paso a Paso + +- Primero copiamos el ejemplo anterior, y hacemos un _npm install_ + +```bash +npm install +``` + +> NOTA: Podemos usar `npm ci` de esta forma instalaremos las dependencias existentes en `package-lock.json` en vez de regenerarlas. + +- Arrancamos la aplicación: + +```bash +ng serve +``` + +- Añadimos html de formulario de alta + +_src/app/user/user-list/user-list.component.html_ + +```diff ++| Avatar | +Id | +Name | +
|---|---|---|
|
+ |
+ + {{member.id}} + | ++ {{member.login}} + | +
| Avatar | +Id | +Name | +
|---|---|---|
|
+ |
+ + {{ member.id }} + | ++ {{ member.login }} + | +
| Avatar | +Id | +Name | +
|---|---|---|
|
+ |
+ + {{ member.id }} + | ++ {{ member.login }} + | +
| Avatar | +Id | +Name | +
|---|---|---|
|
+ |
+ + {{ member.id }} + | ++ {{ member.login }} + | +
| Avatar | +Id | +Name | +
|---|---|---|
|
+ |
+ + {{ member.id }} + | ++ {{ member.login }} + | +
menu works!
diff --git a/04-frameworks/02-angular/version-20/playground/src/app/layout/menu/menu.spec.ts b/04-frameworks/02-angular/version-20/playground/src/app/layout/menu/menu.spec.ts new file mode 100644 index 000000000..eafdb54f8 --- /dev/null +++ b/04-frameworks/02-angular/version-20/playground/src/app/layout/menu/menu.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { Menu } from './menu'; + +describe('Menu', () => { + let component: Menu; + let fixture: ComponentFixture