Angular sssssssssssssssssssssssssss

ssssssssssssssss
ssssssssss
ssssssssss
ssssssssss
Guia de atajos

Commandos Básicos Bandera Descripción

Instalar AngularCLI: Ejecutar esto como administrador
ng g c [name] -- at Crea los nuevos archivos en el
npm install -g @angular/cli nivel especi cado sin crear un
nuevo directorio.
Iniciar un proyecto nuevo: dos formas --inline-style
ng g c [name] Incluye los estilos en el mismo
npm init @angular myApp ng g c [name] -s archivo controlador (.ts)
ng new my-app
Template Syntax
Angular CLI: Command line interface Enlaza la propiedad “value”, al valor de lo que
Estos son unos de los comandos comunes para contenga “ rstName” Puede ser cualquier expresión de JavaScript
usarlos en con Angular CLI <input [value]="firstName">
Comando para obtener ayuda de cualquier subrogando
Lo mismo se puede enlazar (bind) con muchos otros
ng --help atributos de los elementos HTML y componentes
ng generate --help personalizados
ng build --help
Añade el “role” igual al valor de myAriaRole
Comandos para generar componentes en Angular <div [attr.role]=“myAriaRole">

Comando Descripción Añade la clase extra-sparkle si es verdadera

la expresión
<div [class.extra-sparkle]="isDelightful">
ng g component [name] Genera un nuevo componente
ng g c [name] en el [name], que puede ser Incrementa el ancho en pixeles igual al
también [path/name] valor de mySize
<div [style.width.px]=“mySize">
ng g directive [name] Crea una nueva directiva
ng g d [name] Añade el listener click y dispara
readRainbow
ng g guard [name] Crea un nuevo guard para <button (click)="readRainbow($event)">
ng g g [name] protección de rutas

ng g interceptor [name] Crea un interceptor para

observables. Enlaza el valor de la expresión al valor que vemos
dentro del párrafo
ng g module [name] Crea un módulo que en sí, es
ng g m [name] un agrupador de diferentes
componentes. <p> Hello {{ponyName}} </p>
ng g pipe [name] Crea un pipe que en sí, es un
ng g p [name] transformador visual de la data. Con gura el enlace de datos bidireccional.
ng g service [name] Crea un servicio, que en sí, <my-cmp [(title)]="name">
ng g s [name] permite compartir información
Que sería el equivalente a:
entre la aplicación.
<my-cmp
[title]="name"
Banderas útiles a los comandos de generación
(titleChange)="name=$event">
Bandera Descripción

ng g c --help Muestra la ayuda completa de Uso de pipes:

todos los comandos <p>
disponibles. Nombre: {{ 'fernando' | uppercase }}
</p>
ng g c [name] --dry-run Ejecuta el comando sin modi car
ningún archivo. Útil si no se está
seguro de lo que el comando hará

Cursos y cupones en fernando-herrera.com












fi
fi
fi
fl
fi
 Angular sssssssssssssssssssssssssss
sssssss
sssssss
ssssssssssssssss
Guia de atajos sssssss

Operador de navegación segura

<p> FormsModule de @angular/forms
Employer: {{employer?.companyName}} <input [(ngModel)]="userName">
</p>

Decoradores de clase para componentes

Referencias locales en el html
@Input: De ne una propiedad que puede ser enviada
<input #search type="text" /> desde el padre hacia el componente hijo. @angular/core
<video #movieplayer …></video> @Input() myProperty;
<button (click)="movieplayer.play()">
Play Ejemplo:
</button> <my-cmp [myProperty]=“someExpression">

Directivas incluídas @Output: De ne una salida del componente que el

Las siguientes directivas vienen incluidas dentro del componente padre puede suscribirse para escuchar.
módulo “CommonModule” de @angular/common @Output() myEvent = new EventEmitter();
Ejemplo:
Ver la otra forma de @if, @for, @switch más
adelante en este PDF. <my-cmp (myEvent)=“someExpression”>

*ngIf: Remueve o crea una parte del DOM basado en

la expresión “showSection” @HostBinding: Enlaza el elemento an trión (host) a la
<section *ngIf="showSection"> propiedad de la clase: @angular/core

@HostBinding('class.valid') isValid;
*ngFor: Convierte el <li> en un template, y lo usa para
duplicarlo basado en la cantidad de elementos dentro @HostListener: Se suscribe al evento click del
de la lista an trión (host), opcionalmente se puede recibir el
evento. @angular/core
<li *ngFor="let item of list">
@HostListener('click', ['$event'])
onClick(e) {…}
ngSwitch: Condicionalmente cambia el contenido del
<div> por el template que cumpla la condición. @ViewChild y @ViewChildren: Enlaza el resultado
<div [ngSwitch]="conditionExpression">
nal de la vista del componente basado en el
<ng-template [ngSwitchCase]="case1Exp"> predicado a la propiedad de la clase (no es válido para
… directivas) @angular/core
</ng-template>
@ViewChild(myPredicate) myChildComponent;
<ng-template
@ViewChildren(myPredicate) myChildComponent;
ngSwitchCase="case2LiteralString">
…
</ng-template>
<ng-template ngSwitchDefault>
Ciclo de vida - Lifecycle Hooks
Estos son los pasos de ejecución cuando un
componente o directiva entra en pantalla.
ngClass: Enlaza clases de css basado en un objeto o
expresión.
Hook / Class Method Descripción
<div [ngClass]=
"{'active': isActive,
'disabled': isDisabled}"> constructor Se llama antes de cualquier
ciclo de vida.

ngOnChanges Antes de cualquier cambio a una

ngStyle: Permite asignar estilos a los elementos html propiedad.
utilizando CSS.
ngOnInit Justo después del constructor.
<div [ngStyle]="{'property': 'value'}">
<div [ngStyle]="dynamicStyles()">

Cursos y cupones en fernando-herrera.com

















fi

fi
fi
fi
fi
 Angular sssssssssssssssssssssssssss
ssssssssssssssss
sssssss
sssssss
sssssss
Guia de atajos
Hook / Class Method Descripción
RouterLinkActive: Mostrar anchor tag con una clase
ngDoCheck Se llama cada vez que una
si nos encontramos en la respectiva ruta:
propiedad del componente o <a [routerLink]="[ '/path' ]"
directiva es revisada. routerLinkActive="active">
ngAfterContentInit Después de ngOnInit, cuando el
componente es inicializado.
Protección de rutas
ngAfterContentChecked Se llama después de cada CanActivateFn: Una interfaz que nos permite de nir
revisión del componente o una función para validar si una ruta se puede activar.
directiva. import {
CanActivateFn,
ngAfterViewInit Después del ngAfterContentInit ActivatedRouteSnapshot, RouterStateSnapshot
} from "@angular/router"
ngAfterViewChecked Llamado después de cada function canActivateGuard: CanActivateFn =
revisión de las vistas del (
componente o directiva. route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
) => { … }
ngOnDestroy Se llama justo antes de que el
componente o directiva va a ser # Definición de la ruta
destruida. { path: …, canActivate: [canActivateGuard] }

Con guración de rutas y Router

Este es un ejemplo de rutas comunes CanDeactivateFn: Interface para de nir una función
const routes: Routes = [
que permite indicarle a Angular si el usuario puede salir
{ path: '', component: HomeComponent }, de una ruta, útil si hay cambios pendientes de guardar
{ path: 'path/:routeParam', component: … }, por parte del client.
{ path: 'staticPath', component: … },
{ path: '**', component: … }, import {
CanDeactivateFn, ActivatedRouteSnapshot,
{ path: 'oldPath', redirectTo: '/staticPath' }, RouterStateSnapshot } from "@angular/router"
{ path: …, component: …,
data: { message: 'Custom' } function canDeactivateGuard: CanDeactivateFn<T> =
} (
]); component: T,
route: ActivatedRouteSnapshot,
const routing = RouterModule.forRoot(routes); state: RouterStateSnapshot
) => { … }

En el HTML: # Definición de la ruta

{ path: …, canDeactivate: [canDeactivateGuard] }
<router-outlet></router-outlet>

LazyLoad: Permite de manera perezosa, cargar un

módulo. Esto signi ca cargarlo bajo demanda (cuando El mismo concepto se puede aplicara a las siguientes
un usuario lo solicita) y luego queda en memoria. funciones:
import { Routes } from '@angular/router'; Función Descripción

const routes: Routes = [ CanActivateChildFn El router determina si la ruta hija se

{ puede activar
path: 'items',
loadChildren: () => import('./items/ ResolveFn El router determina si puede o no
items.module').then(m => m.ItemsModule) mostrar una ruta.
}
CanLoadFn El router determina si puede cargar
];
mediante lazy load un módulo

RouterLink: Diferentes anchor tags soportados para navegación La forma común de protección de rutas en Angular es
<a routerLink="/path"> utilizar clases inyectables que implementan los
<a [routerLink]="[ '/path', routeParam ]”>
métodos mencionados: CanActivate, CanLoad,
<a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
<a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
CanDeactivate.
<a [routerLink]="[ '/path' ]" fragment="anchor">

Cursos y cupones en fernando-herrera.com










fi
fi
fi
fi
 Angular sssssssssssssssssssssssssss
ssssssssssssssss
Guia de atajos
Guards con clases
Debe de implementar la interfaz de “CanActivate” para
que Angular lo considere un pipe para proteger una
Pipes
ruta a la hora de activarla. Este es un listado de los pipes propios de Angular
Pipe Descripción
class UserToken {}
class Permissions { Realizar formateos a una fecha
canActivate(): boolean {
DatePipe
return true;
} UpperCasePipe Capitaliza todo el texto
}

@Injectable() LowerCasePipe Coloca en minúscula todo el texto

class CanActivateTeam implements CanActivate {
constructor(private permissions: Permissions,
private currentUser: UserToken) {} CurrencyPipe Formatea el número a un formato de moneda.

canActivate(
route: ActivatedRouteSnapshot, DecimalPipe Transforma un número a un string con formato
state: RouterStateSnapshot especi cado
): Observable<boolean|UrlTree>|Promise<boolean|
UrlTree>|boolean|UrlTree { PercentPipe Transforma el número a un porcentaje string,
return formateado basado en las reglas locales.
this.permissions.canActivate(this.currentUser,
route.params.id); AsyncPipe Espera el resultado de una tarea asíncrona
} (Promise u Observable) e imprime la resolución
} o emisión

I18nPluralPipe Es una mapa de valores para ayudar con la

localización de palabras
Y se utiliza de la siguiente manera en la de nición de
I18nSelectPipe Similar al anterior, pero para singulares
las rutas.
@NgModule({
imports: [ JsonPipe Convierte un valor en una representación con
RouterModule.forRoot([ formato JSON
{
path: 'team/:id', Transforma un objeto o mapa, en un arreglo de
component: TeamComponent,
KeyValuePipe
pares de valores
# AQUI!!! <——
canActivate: [CanActivateTeam]
} SlicePipe Crea un nuevo arreglo o string que contiene el
]) subset (slice o corte) de los elementos
],
providers: [CanActivateTeam, UserToken, Permissions] Capitaliza cada palabra del string que este
})
TitleCasePipe
separado por espacios
class AppModule {}

Pero también se puede de nir en línea con la siguiente RxJS - Of cial Docs
función. RxJS, es una librería incluida en Angular para poder
@NgModule({ trabajar con observables y en sí, la programación
imports: [ reactiva.
RouterModule.forRoot([
{
path: 'team/:id', Hay muchos operadores y funciones para generar
component: TeamComponent, observables que se usan en Angular, considere
canActivate: [
(route: ActivatedRouteSnapshot, state: estudiar RxJS para poder reducir la cantidad de
RouterStateSnapshot) => true código de los observables y hacer el trabajo más
]
}
simple.
])
], Pueden ver mis cursos de Angular y RxJs Aquí
})
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.

Cursos y cupones en fernando-herrera.com





fi
fi
fi
fi
 Angular
Guia de atajos
Signals (Angular 17+) Mutar estado
Son un sistema que granularmente sigue cómo y Si se desea cambiar el valor de la señal dependiendo
dónde cambia un valor a lo largo de la aplicación. Esto del valor que tenga anteriormente pero mutando el
optimiza la velocidad de renderización. estado, se puede usar el método update de esta
manera.
Las señales permiten con precisión quirúrgica, saber const todos = signal(
en dónde necesita Angular cambiar el valor de una [
variable, calcular un nuevo valor, disparar un efecto {title: 'Learn signals', done: false}
secundario, etc. ]
);

Writable Signals todos.update( value => {

value[0].done = true;
Son señales que pueden cambiarse manualmente, se
pueden usar como simples variables reactivas: return value;
});
import { signal } from '@angular/core';

const count = signal(0); Computed Signals

Básicamente son señales de sólo lectura, pero es un
console.log( 'Count es: ' + count() valor que puede cambiar únicamente si una señal
usada para crearlo cambia.
Se usan los paréntesis para obtener su valor.
const count = signal<number>(0);
const doubleCount = computed(() => count() * 2);
O como propiedades de clase (preferido) (se pueden
usar en servicios, componentes, directivas, funciones, etc) En este caso, doubleCount sólo cambiará, si count
export class AppComponent { cambia. Esto sucede automáticamente.

public count = signal(0); Tanto las señales computadas como los efectos (ver
siguiente tema), pueden tener tantas señales internas
} como sea necesario
const showCount = signal(false);
Para actualizar el valor de una señal, hay 3 formas const count = signal(0);

Set const conditionalCount = computed(() =>

{
Para establecer un valor a la señal sin importar el valor if (showCount()) {
que tuviera anteriormente. Si el valor es el mismo que return `The count is ${count()}.`;
antes, los efectos y señales computadas no se vuelven } else {
a disparar. return 'Nothing to see here!';
public count = signal(0); }
});
changeSignal() {
this.count.set(10);
} Referencias:
Signals - Advanced Topics

Update
Si se desea cambiar el valor de la señal dependiendo Effects
del valor que tenga anteriormente, se puede utilizar el Un efecto es una operación que se ejecuta al menos
método update. una vez (similar al ngOnInit), pero si usa alguna señal, y
public count = signal(0); esa señal cambia, el efecto se vuelve a ejecutar.

changeSignal() { effect(() => {

this.count.update( value => value + console.log(`The current count is: ${count()}`);
1); });

Cursos y cupones en fernando-herrera.com











 Angular
Guia de atajos
El efecto retorna un E ectRef, que a su vez tiene un Como propiedades de clase:
método destroy, en el caso que quieras destruir el
efecto manualmente. @Component({...})
export class EffectiveCounterCmp {
Los efectos a menos de especi car lo contrario, se readonly count = signal(0);
limpian a si mismos cuando no son necesarios.
private loggingEffect = effect(() => {
console.log(`The count is: ${this.count()})`);
});
Usos comunes de efectos }

- Mostrar logs, cuando la data cambia, ya sea para

Si se necesita crear un efecto fuera de esos lugares, se
analytics o depuración. puede mediante opciones y un servicio de inyección
(Injector), más información aquí
- Mantener la data en sincronía (window.localStorage)

- Añadir comportamiento al DOM cuando la sintaxis

de template no pueda hacerlo. Effect cleanup functions
Los efectos pueden correr tareas largas o bien ser
- Realizar renderizado personalizado a un canvas, ejecutados por largos periodos de tiempo, a veces el
grá cos o librerías de terceros efecto debe o será destruido y/o regenerado, si se
necesita un procedimiento especial que deben de
- Disparar efectos secundarios necesarios basados ejecutar cuando se destruyen, puedes mandar una
en señales. función de limpieza.

Cuando NO usar efectos effect((onCleanup) => {

const user = currentUser();
Evitar efectos para propagar cambios de estado, esto
puede resultar en el error const timer = setTimeout(() => {
console.log(`1 second ago, the user became ${user}`);
ExpressionChangedAfterItHasBeenChecked, }, 1000);
actualizaciones circulares in nitas o cambios no
onCleanup(() => {
deseados. clearTimeout(timer);
});
});
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
Referencia:
este tipo de casos, usar computed.
https://angular.io/guide/signals

Effect Injection Context Nuevo ujo de control

Registar un efecto requiere un “injection context”
básicamente acceso a la función inject (usada para inyectar
dependencias desde Angular 14+) @if
Similar al *ngIf ahora tenemos un @if mucho más
La forma más fácil es registrarlos en el constructor, poderoso
pero puedes colocarlos como propiedades de clase // user-controls.component.ts
@Component({
también. standalone: true,
selector: 'user-controls',
template: `
En constructor: @if (isAdmin) {
@Component({...}) <button>Erase database</button>
export class EffectiveCounterCmp { }
readonly count = signal(0); `,
constructor() {
// Registrar el efecto
})
effect(() => { export class UserControls {
console.log(`The count is: ${this.count()})`); isAdmin = true;
}); }
}
}

Cursos y cupones en fernando-herrera.com







fi
fl
ff
fi
fi
 Angular
Guia de atajos
@else
// user-controls.component.ts
@Component({
@empty
standalone: true, Si el arreglo no tiene elementos, puedes usarlo para
selector: 'user-controls', mostrar un elemento.
template: ` @for (item of items; track
@if (isAdmin) { item.name) {
<button>Erase database</button> <li> {{ item.name }} </li>
} @else {
} @empty {
<p>You are not authorized.</p>
} <li> There are no items. </li>
`, }
})
export class UserControls {
isAdmin = true;
} @switch
Similar al @if, tenemos una forma inspirada en el
Switch de JavaScript.
@for @switch (condition) {
Similar al *ngFor, ahora tenemos una nueva forma de @case (caseA) {
realizar ciclos en nuestra data, que también es Case A.
combinable con el @if (que no se podía hacer antes) }
<!-- ingredient-list.component.html --> @case (caseB) {
<ul> Case B.
@for (ingredient of ingredientList; }
track ingredient.name) { @default {
<li>{{ ingredient.quantity }} -
{{ ingredient.name }}</li>
Default case.
} }
</ul> }

La propiedad “track” le permite a angular poder seguir

el elemento en caso de que el listado cambie. Vistas aplazables - Deferrable Views
Es un mecanismo que tenemos para poder controlar
Variables disponibles dentro del @for de forma granular, la manera cómo queremos que
nuestros componentes se carguen en pantalla y
Pipe Descripción
atrasar su ejecución.

$count Numero total de elementos del listado

@defer y @placeholder
$index Posición index del elemento actual Permite de nir que el bloque de código será cargado
de forma perezosa y no renderizado de forma inicial,
$ rst Valor boolean que determina si es el primer permitiéndonos especi car el momento en el cual
elemento del listado
cargarlo.
$last Valor boolean que determina si es el último
elemento del listado
@defer {
Determina si el índice actual es par
$even <large-component />
} @placeholder (minimum 500ms) {
$odd Determina si el índice es impar
<p>Placeholder content</p>
}
@for (item of items; track item.id;
let idx = $index, e = $even) {
Item #{{ idx }}: {{ item.name }}
}

Cursos y cupones en fernando-herrera.com








fi
fi
fi
 Angular
Guia de atajos
@loading Posibles opciones “on”
Es un bloque opcional de código que permite declarar Estas son las posibles opciones en el defer con “on”
el contenido a mostrar durante la carga de cualquier Pipe Descripción
dependencia aplazable.
@defer { on idle Se dispara cuando el navegador llega a un
<large-component /> estado inactivo “idle”
} @loading (after 100ms; minimum 1s) {
on viewport Se dispara cuando el bloque entra al punto de
<img alt=“loading..." src="loading.gif" /> vista del usuario. Por defecto se puede
} conectar el placeholder y otro elemento

on interaction Se dispara cuando el usuario interactúa con un

elemento especí co mediante un click o
@error keydown

Permite mostrar un contenido en caso de que la carga on hover Se dispara cuando el mouse pasa sobre el
diferida falle. elemento o la referencia.

@defer { on immediate Se dispara tan pronto el cliente termina de

<calendar-cmp /> renderizar la pantalla.
} @error { Se dispara después de cierta duración de
on timer
<p>Failed to load the calendar</p> tiempo en MS milliseconds.
}

Defer Triggers On Interaction - Formas

@defer (on interaction) {
Hay dos opciones que tenemos para controlar cuando
<calendar-cmp />
un componente será cargado de forma aplazable, y es } @placeholder {
el “on” y “when”. También se pueden mezclar. <div>Calendar placeholder</div>
}
@defer (on interaction; on timer(5s)) {
<calendar-cmp />
} @placeholder { Otra interesante
<img src="placeholder.png" /> <button type="button"
} #greeting>Hello!</button>
Este código signi ca que el bloque será disparado
cuando el usuario interactúe con el placeholder o @defer (on interaction(greeting)) {
después de 5 segundos. <calendar-cmp />
} @placeholder {
<div>Calendar placeholder</div>
When <condition> }
Similar a una condición aplicable a un @if, puedes
añadir la condición de carga
@defer (when cond) {
<calendar-cmp />
} Prefetching
@defer permite precargar el código componente (no lo
ejecuta, carga el código) y así tenerlo listo tan pronto
Recuerda que se pueden mezclar. sea el momento de llamarlo.
@defer (on viewport; when cond) { @defer (on interaction; prefetch on idle) {
<calendar-cmp /> <calendar-cmp />
} @placeholder {
} @placeholder { <img src="placeholder.png" />
<img src="placeholder.png" /> }
}

Aquí se cargará cuando cualquiera de las dos

condiciones se cumpla.

Cursos y cupones en fernando-herrera.com











fi
fi
 Angular sssssss
sssssss
Guia de atajos sssssss

Glosario de Términos RXJS

Es una librería pre-cargada en Angular para trabajar
con programación reactiva. Básicamente todo lo
Angular y AngularJS relacionado a Observables, es de rxjs.
Angular es el framework de Google, es el sucesor de la
librería AngularJS, la cual ya está obsoleta.
Pipe
Angular y AngularJS son dos cosas distintas. Objeto que permite transformar de manera visual la
información que mostraremos en pantalla sin mutar la
Inyección de dependencias - DI data real.
También conocido como DI, es un patrón de diseño en
la cual una clase requiere una o más dependencias Module

-
para poder inicializarse. Son contenedores para realizar la cohesion de código
que tiene funcionamiento en común. Este
Usualmente esas dependencias ya están inicializadas funcionamiento común puede ser un ujo de trabajo,
en otro lugar y el componente utiliza esa misma conjunto de capacidades o código dedicado a un
instancia. dominio de la aplicación.

Observable camelCase
Es un objeto en el cual a lo largo del tiempo, puede Usarlo para variables, métodos, propiedades.
estar emitiendo diferentes valores.

Usualmente cuando hablamos de “suscribimos a los UpperCamelCase

observables”, signi ca estar escuchando las Usarlo para nombres de clases e interfaces.
emisiones que ese objeto estará emitiendo a lo largo
de su vida.
dash-case / kebab-case
Usarlo para describir nombres de archivos y selectores
Components de componentes.
Usualmente es un archivo que está compuesto por
una clase controladora escrita en TypeScript, un
template HTML que puede estar separado y un archivo UPPER_UNDERSCORE_CASE
de CSS opcional. También se puede juntar con los UPPER_SNAKE_CASE: Usarlo tradicionalmente para
archivos de pruebas. constantes de compilación.

Directives - Directivas
Hay varios tipos de directivas, pero en sí, nos permiten
Change Detection
cambiar el comportamiento de elementos HTML o Es el mecanismo en el cual Angular sincroniza el
componentes personalizados. estado del UI con el estado de la aplicación.

Adicionalmente Angular cuenta con varias directivas

propias como ngSwitch, *ngFor y ngIf. Decorator
Es una simple función que modi ca una clase o
Guard propiedad. Básicamente añade una funcionalidad o
Es un tipo de middleware, middleman, o guardia de comportamiento especí co.
acceso. Es un objeto que está pendiente si alguien
puede entrar, cargar o salir de una ruta.
Poly ll
Usualmente es una forma en la cual podemos expandir
Interceptor el soporte a plataformas que no cuentan con lo que
Es un objeto que brinda un mecanismo para
necesitamos para correr un proceso.
interceptar y/o mutar las solicitudes y respuestas
HTTP.

Cursos y cupones en fernando-herrera.com



ffao
sEApunsbPgroup-arrows-rotate
fi
fi
fi
fi
fl