Indice

• Comandos básicos
  • Angular CLI
• Template Syntax
• Directivas incluídas
  • Decoradores de clase para componentes
• Ciclo de vida (Lifecycle Hooks)
• Configuración de rutas y Router
  • LazyLoad
  • Routerlink
  • RouterLinkActive
• Protección de rutas
• Guards con clases
• Pipes
• Rxjs
• Signals (Angular 17+)
  • Writable Signals
    • Set
    • Update
    • Mutar estado
    • Computed signals
  • Effects
    • Usos Comunes de efectos
    • Cuando NO usar efectos
    • Effect Injection Context
    • Effect cleanup functions
• Nuevo flujo de control
  • @if
  • @else
  • @for
  • @Empty
  • @switch
  • @defer y @placeholder
  • @loading
  • @error
• Defers Triggers
  • when <condition>
  • Posibles opciones "on"
  • On Interaction - formas
  • Prefetching
• Glosario de Términos

Comandos básicos

Instalar Angular CLI:

npm install -g @angular/cli

Iniciar un proyecto nuevo:

npm init @angular my-app
ng new my-app

Angular CLI

Estos son unos de los comandos comunes para usarlos en Angular CLI:

• Comandos de ayuda:

ng --help
ng generate --help
ng build --help

• Comandos para generar componentes:

• Banderas útiles a los comandos de generación:

Template Syntax

Enlaza la propiedad "value", al valor de lo que contenga "fisrtName":

<input [value]="firstName" />

Lo mismo se puede enlazar (bind) con muchos otros atributos de los elementos HTML y componentes personalizados

Añade el "role" igual al valor de myAriaRole
<div [attr.role]="myAriaRole">
  Añade la clase "extra-sparkle" si isDelightful es true
  <div [class.extra-sparkle]="isDelightful">
    Incrementa el ancho en pixeles igual al valor de mySize
    <div [style.width.px]="mySize">
      Añade el listener click y dispara readRainbow()
      <button (click)="readRainbow($event)"></button>
    </div>
  </div>
</div>

Enlaza el valor de la expresión al valor que vemos dentro del párrafo

<p>Hola {{nombre}}</p>
<p>La suma de 1 + 1 es {{1 + 1}}</p>

Configura el enlace de datos bidireccional

<my-cmp [(title)]="titulo" />

Que sería el equivalente a esto:

<my-cmp [title]="titulo" (titleChange)="titulo=$event" />

Uso de pipes:

<p>Nombre: {{ 'fernando' | uppercase }}</p>
<p>Fecha: {{ fecha | date:'dd/MM/yyyy' }}</p>

Operador de navegación segura:

<p>Empleado: {{employer?.name}}</p>

Referencias locales en el html:

<input #phone placeholder="phone number" />

<video #movieplayer ...></video>
<button (click)="movieplayer.play()">Play</button>

Directivas incluídas

Las siguientes directivas vienen inclusidas dentro del módulo "CommonModule" de @angular/common:

Ver las nuevas formas de @if, @for, @switch y más aquí

• *ngIf: Muestra o esconde un elemento del DOM dependiendo del valor de la expresión "showSection.

  <section *ngIf="showSection"></section>
  

• *ngFor: Itera sobre una lista de elementos y muestra un elemento por cada uno.

  <li *ngFor="let item of items"></li>
  

• ngSwitch: Muestra un elemento dependiendo del valor de la expresión "choice".

  <div [ngSwitch]="choice">
    <p [ngSwitchCase]="'case1Exp'">Escogiste el caso 1</p>
    <p ngSwitchCase="'case2LiteralString'">Escogiste el caso 2</p>
    <p ngSwitchDefault>Escogiste el caso por defecto</p>
  </div>
  

• ngClass: Añade o quita clases dependiendo del valor de la expresión "isActive" o "isDisabled".

  <div
    [ngClass]="{
      active: isActive,
      disabled: isDisabled
  }"
  ></div>
  

• ngStyle: Permite asignar estilos a los elementos HTML utilizando CSS.

  <div
    [ngStyle]="{
      'font-style': canSave ? 'italic' : 'normal',
      'font-weight': !isUnchanged ? 'bold' : 'normal'
  }"
  >
    <div [ngStyle]="currentStyles()"></div>
  </div>
  

• FormsModule de @angular/forms: Permite trabajar con formularios en Angular.

  <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
    <input [(ngModel)]="userName" />
    ...
  </form>
  

• ReactiveFormsModule de @angular/forms: Permite trabajar con formularios reactivos en Angular.

  <form [formGroup]="form" (ngSubmit)="onSubmit()">
    <input formControlName="name" />
    ...
  </form>
  

Decoradores de clase para componentes

• @Input: Define una propiedad que puede ser enviada desde el padre hacie el componente hijo.

  @Input() nombre: string;
  

  <app-hijo [nombre]="nombrePadre"></app-hijo>
  

• @Output: Define un evento que puede ser enviado desde el componente hijo hacia el padre.

  @Output() nombreCambiado = new EventEmitter<string>();
  

  <app-hijo (nombreCambiado)="nombrePadre = $event"></app-hijo>
  

• @HostBinding: Enlaza el elemento anfitrioón (host) con una propiedad de la clase.

  @HostBinding('class.valid') isValid: boolean;
  

• @HostListener: Se suscribe al evento click del anfitrión (host), opcionalmente se puede recibir el evento.

  @HostListener('click', ['$event'])
  onClick(event: Event) {
      ...
  }
  

• @ViewChild y @ViewChildren: Enlaza el resultado final de la vista del componente basado en el predicado a la propiedad de la clase (no es valido para directivas).

  @ViewChild(myChild) myChildComponent: ElementRef;
  

  @ViewChildren(myChild) myChildComponents: QueryList<ElementRef>;
  

Ciclo de vida (Lifecycle Hooks)

Estos son los pasos de ejecución cuando un componente o directiva entra en pantalla:

Configuración de rutas y Router

Este es un ejemplo de rutas comunes en Angular:

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'staticPath', component: ... },
    { path: 'path/:routeParam', component: ... },
    { path: '**', component: PageNotFoundComponent },
    { path: 'oldPath', redirectTo: '/staticPath' }
    { path: ..., component: ..., canActivate: [AuthGuard] }
    { path: ..., component: ...,
        data: { message: 'Custom message' }
    }
];

const routing = RouterModule.forRoot(routes);

En el HTML:

<router-outlet></router-outlet>

tambien se puede usar:

<router-outlet />

LazyLoad

Permite de manera perezosa, cargar un módulo. Esto significa cargarlo bajo demanda (cuando un usuario lo solicita) y luego queda en memoria.

import { Routes } from '@angular/router'

const routes: Routes = [
  {
    path: 'home',
    loadComponent: () => import('./home/home.component').then((c) => c.HomeComponent),
  },
]

O también:

import { Routes } from '@angular/router'

const routes: Routes = [
  {
    path: 'home',
    loadComponent: () => import('./home/home.module'),
  },
]

Pero para que funcione correctamente el componente tiene que exportarse en default.

export default class HomeComponent{
    ...
}

Routerlink

Diferentes anchor tags soportados para nagevación:

<a routerLink="/path">
  <a [routerLink]="[ '/path', routeParam ]">
    <a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
      <a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
        <a [routerLink]="[ '/path' ]" fragment="anchor"></a></a></a></a
></a>

RouterLinkActive

Mostrar anchor tag con una clase si nos encontramos en la respectiva ruta:

<a [routerLink]="[ '/path' ]" routerLinkActive="active"></a>

Protección de rutas

• CanActivateFn: Una interfaz que nos permite definir una función para validar si una ruta se puede activar

  import {
      CanActivateFn,
      ActivatedRouteSnapshot,
      RouterStateSnapshot
  } from "@angular/router"
  
  function canActivateGuard: CanActivateFn =
  (
      route: ActivatedRouteSnapshot,
      state: RouterStateSnapshot
  ) => { … }
  
  # Definición de la ruta
  { path: …, canActivate: [canActivateGuard] }
  

• CanDeactivateFn: Interface para definir una función que permite indicarle a Angular si el usuario puede salir de una ruta, útil si hay cambios pendientes de guardar por parte del client

  import {
      CanDeactivateFn,
      ActivatedRouteSnapshot,
      RouterStateSnapshot
  } from "@angular/router"
  
  function canDeactivateGuard: CanDeactivateFn<T> =
  (
      component: T,
      route: ActivatedRouteSnapshot,
      state: RouterStateSnapshot,
  ) => { … }
  
  # Definición de la ruta
  { path: …, canDeactivate: [canDeactivateGuard] }
  

El mismo concepto se puede aplicar a las siguientes funciones:

La forma común de protección de rutas en Angular es utilizar clases inyectables que implementan los métodos mencionados: CanActivate, CanLoad, CanDeactivate.

Guards con clases

Debes de implementar la interfaz de “CanActivate” para que Angular lo considere un pipe para proteger una ruta a la hora de activarla.

class UserToken {}
class Permissions {
  canActivate(): boolean {
    return true
  }
}
@Injectable()
class CanActivateTeam implements CanActivate {
  constructor(private permissions: Permissions, private currentUser: UserToken) {}
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return
    this.permissions.canActivate(this.currentUser, route.params.id)
  }
}

Y se utiliza de la siguiente manera en la definición de las rutas:

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamComponent,
        # AQUI!!! <——
        canActivate: [CanActivateTeam]
      }
    ])
  ],
  providers: [CanActivateTeam, UserToken, Permissions]
})
class AppModule {}

Pero también se puede definir en línea con la siguiente función:

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamComponent,
        canActivate: [(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => true],
      },
    ]),
  ],
})
class AppModule {}

La clave de los Guards, es que deben de retornar un valor Boolean si quieren dejar pasar la petición. También puede ser una promesa que resuelva un boolean o un observable que emita un boolean.

Pipes

Este es un listado de los pipes Propios de angular

Rxjs

RxJS, es una librería incluida en Angular para poder trabajar con observables y en sí, la programación reactiva.

Hay muchos operadores y funciones para generar observables que se usan en Angular, considera estudiar RxJS para poder reducir la cantidad de código de los observables y hacer el trabajo más simple.

Hare un articulo sobre RxJS en Angular, pero por ahora te dejo un ejemplo de como se usa un observable en Angular:

import { Observable, of } from 'rxjs';

...

const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  setTimeout(() => {
    subscriber.next(4);
    subscriber.complete();
  }, 1000);
});

Y un ejemplo de BehaviorSubject:

import { BehaviorSubject } from 'rxjs';

...

private nameUserObservablePrivate: BehaviorSubject<string> =
  new BehaviorSubject<string>("");

get nameUserObservable() {
  return this.nameUserObservablePrivate;
}

set nameUserObservableData(data: string) {
  this.nameUserObservablePrivate.next(data);
}

Signals (Angular 17+)

Son un sistema que granularmente sigue cómo y dónde cambia un valor a lo largo de la aplicación. Esto optimiza la velocidad de renderización.

Las señales permiten con precisión quirúrgica, saber en dónde necesita Angular cambiar el valor de una variable, calcular un nuevo valor, disparar un efecto secundario, etc.

Writable Signals

Son señales que pueden cambiarse manualmente, se pueden usar como simples variables reactivas:

import { signal } from '@angular/core'
const count = signal(0)
console.log('Count es: ' + count())

Se usan los paréntesis para obtener el valor actual de la señal.

O como propiedades de clase (preferido) (se pueden usar en servicios, componentes, directivas, funciones, etc)

export class AppComponent {
  public count = signal(0)
}

Para actualizar el valor de una señal, hay 3 formas

Set

Para establecer un valor a la señal sin importar el valor que tuviera anteriormente. Si el valor es el mismo que antes, los efectos y señales computadas no se vuelven a disparar

public count = signal(0);

changeSignal() {
  this.count.set(10);
}

Update

Si se desea cambiar el valor de la señal dependiendo del valor que tenga anteriormente, se puede utilizar el método update.

public count = signal(0);

changeSignal() {
  this.count.update( value => value + 1 );
}

Mutar estado

Si se desea cambiar el valor de la señal dependiendo del valor que tenga anteriormente pero mutando el estado, se puede usar el método update de esta manera.

const todos = signal([{ title: 'Aprender Signals', done: false }])
todos.update((value) => {
  value[0].done = true
  return value
}) // [{title: 'Aprender Signals', done: true}]

Computed signals

Básicamente son señales de sólo lectura, pero es un valor que puede cambiar únicamente si una señal usada para crearlo cambia.

const count = signal<number>(2)
const double = signal(() => count() * 2)
console.log('Double es: ' + double()) // 4

En este caso, doubleCount sólo cambiará, si count cambia. Esto sucede automáticamente.

Tanto las señales computadas como los efectos (ver siguiente tema), pueden tener tantas señales internas como sea necesario

const showCount = signal(false)
const count = signal(0)
const conditionalCount = computed(() => {
  if (showCount()) {
    return `La cuenta es ${count()}.`
  } else {
    return '¡Aquí no hay nada!'
  }
})

Referencias:

Guia oficial de Angular

Effects

Un efecto es una operación que se ejecuta al menos una vez (similar al ngOnInit), pero si usa alguna señal, y esa señal cambia, el efecto se vuelve a ejecutar

effect(() => {
  console.log(`The current count is: ${count()}`)
})

El efecto retorna un EffectRef, que a su vez tiene un método destroy, en el caso que quieras destruir el efecto manualmente. Los efectos a menos de especificar lo contrario, se limpian a si mismos cuando no son necesarios.

Usos Comunes de efectos

• Mostrar logs, cuando la data cambia, ya sea para analytics o depuración.
• Mantener la data en sincronía (window.localStorage)
• Añadir comportamiento al DOM cuando la sintaxis de template no pueda hacerlo.
• Realizar renderizado personalizado a un canvas, gráficos o librerías de terceros
• Disparar efectos secundarios necesarios basados en señales.

Cuando NO usar efectos

Evitar efectos para propagar cambios de estado, esto puede resultar en el error ExpressionChangedAfterItHasBeenChecked, actualizaciones circulares infinitas o cambios no deseados.

Debido a esto, las señales por defecto marcan warnings o errores si quieres cambiar el valor de una señal en un efecto. (Se puede pero no se debe), para este tipo de casos, usar computed.

Effect Injection Context

Registar un efecto requiere un “injection context” básicamente acceso a la función inject (usada para inyectar dependencias desde Angular 14+)

La forma más fácil es registrarlos en el constructor, pero puedes colocarlos como propiedades de clase también.

En constructor:

@Component({...})
export class EffectiveCounterCmp {
  readonly count = signal(0);
  constructor() {
    // Registrar el efecto
    effect(() => {
      console.log(`La cuenta es: ${this.count()})`);
    });
  }
}

Como propiedad de clase:

@Component({...})
export class EffectiveCounterCmp {
  readonly count = signal(0);

  private logginEffect = effect(() => {
    console.log(`La cuenta es: ${this.count()})`);
  });
}

Si se necesita crear un efecto fuera de esos lugares, se puede mediante opciones y un servicio de inyección (Injector), más información aquí.

Effect cleanup functions

Los efectos pueden correr tareas largas o bien ser ejecutados por largos periodos de tiempo, a veces el efecto debe o será destruido y/o regenerado, si se necesita un procedimiento especial que deben de ejecutar cuando se destruyen, puedes mandar una función de limpieza.

effect((onCleanup) => {
  const user = currentUser()

  const timer = setTimeout(() => {
    console.log(`El usuario ${user} ha estado inactivo por 5 minutos`)
  }, 5 * 60 * 1000)

  onCleanup(() => {
    clearTimeout(timer)
  })
})

Referencia:

Guia oficial de Angular

Nuevo flujo de control

@if

Similar al *ngIf, ahora tenemos un @if mucho más poderoso.

// user-controls.component.ts
@Component({
  standalone: true,
  selector: 'app-user-controls',
  template: `
    @if (isAdmin) {
    <button>Eliminar usuario</button>
    }
  `,
})
export class UserControlsComponent {
  isAdmin = true
}

@else

// user-controls.component.ts
@Component({
  standalone: true,
  selector: 'app-user-controls',
  template: `
    @if (isAdmin) {
    <button>Eliminar usuario</button>
    } @else {
    <p>No tienes permisos para eliminar usuarios</p>
    }
  `,
})
export class UserControlsComponent {
  isAdmin = false
}

@for

Similar al *ngFor, ahora tenemos una nueva forma de realizar ciclos en nuestra data, que también es combinable con el @if (que no se podía hacer antes).

<!-- ingredient-list.component.html -->
<ul>
  @for (let ingredient of ingredients; track ingredient.name) {
  <li>{{ ingredient.quantity }} - {{ ingredient.name }}</li>
  }
</ul>

La propiedad "track" le permite a angular poder seguir el elemento en caso de que el listado cambie.

Variables disponibles dentro del @for

@for (let item of items; track item.id; let idx = $index, e = $even) { Item #{{ idx }}: {{ item.name
}} }

@empty

Si el arreglo no tiene elementos, puedes usarlo para mostrar un elemento.

@for (let item of items; track item.name) {
<li>{{ item.name }}</li>
} @empty {
<li>No hay elementos</li>
}

@switch

Similar al @if, tenemos una forma inspirada en el Switch de Javascript.

@switch (condition) { @case 1 {
<p>El valor es 1</p>
} @case 2 {
<p>El valor es 2</p>
} @default {
<p>El valor no es 1 ni 2</p>
} }

@defer y @placeholder

Vistas Aplazables - Deferrable Views

Es un mecanismo que tenemos para poder controlar de forma granular, la manera cómo queremos que nuestros componentes se carguen en pantalla y atrasar su ejecución.

Permite definir que el bloque de código será cargado de forma perezosa y no renderizado de forma inicial, permitiéndonos especificar el momento en el cual cargarlo.

@defer {
<large-component />
} @placeholder (minimum 500ms){
<p>Contenido del placeholder</p>
}

@loading

Es un bloque opcional de código que permite declarar el contenido a mostrar durante la carga de cualquier dependencia aplazable.

@defer {
<large-component />
} @loading (after 100ms; minimum 1s) {
<p>Cargando...</p>
}

@error

Permite mostrar un contenido en caso de que la carga diferida falle.

@defer {
<large-component />
} @error {
<p>Error al cargar el componente</p>
}

Defer Triggers

Hay dos opciones que tenemos para controlar cuando un componente será cargado de forma aplazable, y es el “on” y “when”. También se pueden mezclar.

@defer (on interaction; on timer(5s)) {
<large-component />
} @placeholder {
<img src="placeholder.png" />
}

Este código significa que el bloque será disparado cuando el usuario interactúe con el placeholder o después de 5 segundos.

When <condition>

Similar a una condición aplicable a un @if, puedes añadir la condición de carga.

@defer (when condition) {
<calendar-cmp />
}

Recuerda que se pueden mezclar.

@defer (on viewport; when condition) {
<calendar-cmp />
} @placeholder {
<img src="placeholder.png" />
}

Aquí se cargará cuando cualquiera de las dos condiciones se cumpla.

Posibles opciones "on"

Estas son las posibles opciones en el defer con "on"

On Interaction - formas

@defer (on interaction) {
<large-component />
} @placeholder {
<img src="placeholder.png" />
}

Otra interesante

<button type="button" #greeting>Hola!</button>

@defer (on interaction(greeting)) {
<calendar-cmp>
  } @placeholder {
  <div>...</div>
  }</calendar-cmp
>

Prefetching

@defer permite precargar el código componente (no lo ejecuta, carga el código) y así tenerlo listo tan pronto sea el momento de llamarlo.

@defer (on interaction; prefetch on idle) {
<calendar-cmp>
  } @placeholder {
  <img src="placeholder.png" />
  }</calendar-cmp
>

Referencias:

Guia oficial de Angular

Glosario de Términos

Angular y AngularJS

Angular es el framework de Google, es el sucesor de la librería AngularJS, la cual ya está obsoleta.

Angular y AngularJS son dos cosas distintas.

Inyección de dependencias - DI

También conocido como DI, es un patrón de diseño en la cual una clase requiere una o más dependencias para poder inicializarse.

Usualmente esas dependencias ya están inicializadas en otro lugar y el componente utiliza esa misma instancia.

Observable

Es un objeto en el cual a lo largo del tiempo, puede estar emitiendo diferentes valores.

Usualmente cuando hablamos de “suscribimos a los observables”, significa estar escuchando las emisiones que ese objeto estará emitiendo a lo largo de su vida.

Components

Usualmente es un archivo que está compuesto por una clase controladora escrita en TypeScript, un template HTML que puede estar separado y un archivo de CSS opcional. También se puede juntar con los archivos de pruebas.

Directives - Directivas

Hay varios tipos de directivas, pero en sí, nos permiten cambiar el comportamiento de elementos HTML o componentes personalizados.

Adicionalmente Angular cuenta con varias directivas propias como ngSwitch, *ngFor y ngIf.

Guard

Es un tipo de middleware, middleman, o guardia de acceso. Es un objeto que está pendiente si alguien puede entrar, cargar o salir de una ruta.

Interceptor

Es un objeto que brinda un mecanismo para interceptar y/o mutar las solicitudes y respuestas HTTP.

RXJS

Es una librería pre-cargada en Angular para trabajar con programación reactiva. Básicamente todo lo relacionado a Observables, es de rxjs.

Pipe

Objeto que permite transformar de manera visual la información que mostraremos en pantalla sin mutar la data real.

Module

Son contenedores para realizar la cohesion de código que tiene funcionamiento en común. Este funcionamiento común puede ser un flujo de trabajo, conjunto de capacidades o código dedicado a un dominio de la aplicación.

camelCase

Usarlo para variables, métodos, propiedades.

UpperCamelCase

Usarlo para nombres de clases e interfaces.

dash-case / kebab-case

Usarlo para describir nombres de archivos y selectores de componentes.

UPPER_UNDERSCORE_CASE

UPPER_SNAKE_CASE: Usarlo tradicionalmente para constantes de compilación.

Change Detection

Es el mecanismo en el cual Angular sincroniza el estado del UI con el estado de la aplicación.

Decorator

Es una simple función que modifica una clase o propiedad. Básicamente añade una funcionalidad o comportamiento específico.

Polyfill

Usualmente es una forma en la cual podemos expandir el soporte a plataformas que no cuentan con lo que necesitamos para correr un proceso.