Merge pull request #788 from Lemoncode/angular-review

Angular review

Author: JaimeSalas

04-frameworks/02-angular/01-components/readme_es.md

@@ -12,7 +12,7 @@ Qué vamos a aprender en este ejemplo:
 
 - Crear un componente
 - Crear atributos custom al componente con el decorador @Input
-- Crear eventos custom con el decorador @Output
+- Crear eventos custom con el decorador `@Output`
 - Encapsulación de estilos
 
 Pasos:
@@ -25,7 +25,9 @@ Pasos:
 npm install
 ```
 
-- Encendemos la aplicación:
+> 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
@@ -74,6 +76,71 @@ En la pantalla se verá el contenido por defecto del componente Search:
 
 Colocamos el html del componente en el fichero _search.component.html_ y el css del componente en el fichero _search.component.scss_
 
+Update `app/utils/search/search.component.html`
+
+```html
+<p></p>
+
+<div class="container">
+  <input type="text" class="field" />
+  <div class="icons-container">
+      <div class="icon-search"></div>
+  </div>
+</div>
+```
+
+Update `app/utils/search/search.component.css`
+
+```css
+p {
+  color: blue;
+}
+
+.container {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  width: 150px;
+  height: 30px;
+}
+
+.field {
+  width: 100%;
+  height: 100%;
+  border-radius: 3px;
+}
+
+.icons-container {
+  position: absolute;
+  top: 5px;
+  right: -10px;
+  width: 30px;
+  height: 30px;
+}
+
+.icon-search {
+  position: relative;
+  width: 50%;
+  height: 50%;
+  opacity: 1;
+  border-radius: 50%;
+  border: 3px solid #c7d0f8;
+}
+
+.icon-search:after {
+  content: "";
+  position: absolute;
+  bottom: -9px;
+  right: -2px;
+  width: 4px;
+  border-radius: 3px;
+  transform: rotate(-45deg);
+  height: 10px;
+  background-color: #c7d0f8;
+}
+```
+
 ¡Y listo!. El componente debería verse en la pantalla.
 
 ### Creación de atributos custom
@@ -100,13 +167,16 @@ export class SearchComponent {
   // ...
 ```
 
-Enlazamos las propiedades de clase en el template, actualizando `src/app/utils/search/search.component.ts`:
+Enlazamos las propiedades de clase en el template, actualizando `src/app/utils/search/search.component.html`:
 
 ```html
+<!-- diff -->
 <p>{{ label }}</p>
-
+<!-- diff -->
 <div class="container">
+  <!-- diff -->
   <input type="text" [placeholder]="ph" [value]="name" class="field" />
+  <!-- diff -->
   <div class="icons-container">
       <div class="icon-search"></div>
   </div>
@@ -169,7 +239,7 @@ Actualizamos `src/app/app.component.ts`
 export class AppComponent {
   title = 'app';
 
-  escribeLog($event: string) {
+  escribeLog($event: Event) {
     console.log($event);
   }
 }
@@ -218,6 +288,8 @@ export class SearchComponent {
 
 ### Encapsulación de los estilos
 
+> TODO: Desarrollar estos puntos
+
 Angular encapsula por defecto los estilos, con lo que no tenemos que preocuparnos de ello. No obstante se pueden configurar 3 formas de encapsulación:
 
 - Encapsulación por defecto (Emulated)

04-frameworks/02-angular/02-list-users/readme_es.md

@@ -11,7 +11,7 @@ Que vamos a aprender en este ejemplo:
 
 - Cómo crear un componente de visualización
 - Cómo hacer una llámada asícnrona para pedir datos a una api remota.
-- Cómo iterar y mostrar una lista de resultados con la directiva estructural *ngFor
+- Cómo iterar y mostrar una lista de resultados con la directiva estructural `*ngFor`
 
 También aprenderemos posteriormente la librería de Angular para realizar peticiones a APIs remotas.
 
@@ -25,14 +25,15 @@ Pasos:
 npm install
 ```
 
-- Encendemos la aplicación:
+> 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
 ```
 
-- Si queremos ver que tipo de datos vamos a manejar, podemos abrir el
-  navegador web y ver que devuelve la API Rest de Github
+- Si queremos ver que tipo de datos vamos a manejar, podemos abrir el navegador web y ver que devuelve la API Rest de Github
 
 ```bash
 https://api.github.com/orgs/lemoncode/members

04-frameworks/02-angular/03-directives/readme_es.md

@@ -21,7 +21,9 @@ Pasos:
 npm install
 ```
 
-- Encendemos la aplicación:
+> 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
@@ -156,7 +158,7 @@ export class HighlightDirective {
 
 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.
+`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`:
 
@@ -179,7 +181,7 @@ export class HighlightDirective {
 }
 ```
 
-Si miramos el navegador veremos que Angular a cambiado el valor de style.backgroundColor a todos los elementos que tengan el atributo _appHighlight_.
+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
 
@@ -343,7 +345,7 @@ export class HighlightDirective {
 
 -  color = 'lightblue';
 +  @Input()
-+  public color;
++  public color!: string;
 
   constructor(private el: ElementRef) { }
 
@@ -365,7 +367,7 @@ export class HighlightDirective {
 }
 ```
 
-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.
+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_
 
@@ -419,7 +421,7 @@ Con un poco de javascript podemos elegir un color por defecto en caso de que no
 export class HighlightDirective {
 
   @Input()
-  public color;
+  public color!: string;
 
 +  private defaultColor = 'lightblue';
 
@@ -454,6 +456,27 @@ _src/app/layout/menu/menu.component.html_
 + <p appHighlight [color]="variableColorEnElTS">menu works!</p>
 ```
 
+_src/app/layout/menu/menu.component.ts_
+
+```ts
+import { Component } from '@angular/core';
+import { HighlightDirective } from '../../directives/highlight.directive';
+
+@Component({
+  selector: 'app-menu',
+  standalone: true,
+  imports: [HighlightDirective],
+  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.
@@ -462,15 +485,17 @@ El decorador `@Input` permite realizar la asociación aunque los nombres del atr
 
 _src/app/layout/menu/menu.component.html_
 
-```html
- <p appHighlight colorResaltado="green">menu works!</p>
+```diff
+-<p appHighlight color="green">menu works!</p>
+-<p appHighlight [color]="variableColorEnElTS">menu works!</p>
++<p appHighlight colorResaltado="green">menu works!</p>
 ```
 
 ```diff
 export class HighlightDirective {
 
 +  @Input('colorResaltado')
-  private color;
+  public color!: string;
 ```
 
 Esto se suele utilizar para aprovechar el propio atributo `appHighlight` para pasar uno de los parámetros que tengamos con @Input.
@@ -515,4 +540,3 @@ export class HighlightDirective {
 
 }
 ```
-

04-frameworks/02-angular/04-template-forms/readme_es.md

@@ -9,7 +9,7 @@ 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
+- La directiva `ngModel`
 - Directivas de atributo para validaciones
 - Variables de plantilla
 - Resaltar con CSS los campos no válidos
@@ -25,7 +25,9 @@ Pasos:
 npm install
 ```
 
-- Encendemos la aplicación:
+> 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
@@ -217,7 +219,7 @@ _src/app/user/user-list/user-list.component.html_
     <div>
         <label>Name </label>
 -        <input name="name" [(ngModel)]="newMember.login"/>
-+        <input name="name" [(ngModel)]="newMember.login" required minLength="6"/>
++        <input name="name" [(ngModel)]="newMember.login" required minlength="6"/>
     </div>
     <div>
         <label>Avatar </label>
@@ -228,7 +230,7 @@ _src/app/user/user-list/user-list.component.html_
 </div>
 ```
 
-- Aprovechamos las clases ng-xxxxx que pone ngModel a los input para dar estilos CSS según el estado de validez de los campos
+- Aprovechamos las clases `ng-xxxxx` que pone `ngModel` a los input para dar estilos CSS según el estado de validez de los campos
 
 _src/app/user/user-list/user-list.component.css_
 
@@ -295,7 +297,7 @@ _src/app/user/user-list/user-list.component.html_
 </div>
 ```
 
-- Utilizamos otra variable de plantilla (esta vez extendida de la clase `ngForm`) para deshabilitar el botón si algún campo no es válido:
+- Utilizamos otra variable de plantilla (esta vez extendida de la directiva `ngForm`) para deshabilitar el botón si algún campo no es válido:
 
 _src/app/user/user-list/user-list.component.html_
 

04-frameworks/02-angular/05-pipes/readme_es.md

@@ -22,7 +22,9 @@ Pasos:
 npm install
 ```
 
-- Encendemos la aplicación:
+> 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
@@ -70,7 +72,7 @@ ng generate pipe pipes/search-by-login
 
 - Programamos la pipe
 
-La función transform de la pipe recibirá la lista de miembros sobre la que realizar la búsqueda y el valor por el que buscar. Devolverá una lista con los miembros cuyo campo contenga el valor buscado.
+La función `transform` de la pipe recibirá la lista de miembros sobre la que realizar la búsqueda y el valor por el que buscar. Devolverá una lista con los miembros cuyo campo contenga el valor buscado.
 
 _src/app/pipes/search-by-login.pipe.ts_
 
@@ -156,7 +158,7 @@ _src/app/user/user-list/user-list.component.html_
 
 Pero no ocurre nada, no está filtrando. Angular no encuentra motivo para revisar el html (que es cuando ejecutaría la pipe). 
 
-- Nos bindeamos al evento que nos interese de la caja de búsqueda, para que cuando ocurra el evento Angular revise el html y se ejecute la pipe.
+- Nos enlazamos al evento que nos interese de la caja de búsqueda, para que cuando ocurra el evento Angular revise el html y se ejecute la pipe.
 
 _src/app/user/user-list/user-list.component.html_
 

04-frameworks/02-angular/06-services/readme_es.md

@@ -21,7 +21,9 @@ Pasos:
 npm install
 ```
 
-- Encendemos la aplicación:
+> 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