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
<div [attr.role]=“myAriaRole">
Comandos para generar componentes en Angular
Añade la clase extra-sparkle si es verdadera la expresión
<div [class.extra-sparkle]="isDelightful">
Comando Descripción
Incrementa el ancho en pixeles igual al valor de mySize
ng g component [name]
Genera un nuevo componente <div [style.width.px]=“mySize">
ng g c [name] en el [name], que puede ser Añade el listener click y dispara readRainbow
también [path/name] <button (click)="readRainbow($event)">
ng g directive [name]
Crea una nueva directiva Añade al DIV el atributo title con el valor de la expresión
ng g d [name] <div [title]="'Hello ' + ponyName">

ng g guard [name]
Crea un nuevo guard para
ng g g [name] protección de rutas Enlaza el valor de la expresión al valor que vemos
dentro del párrafo

ng g interceptor [name] Crea un interceptor para

observables. <p> Hello {{ponyName}} </p>

ng g module [name]
Crea un módulo que en sí, es
ng g m [name] un agrupador de diferentes Con gura el enlace de datos bidireccional.

componentes. <my-cmp [(title)]="name">

ng g pipe [name]
Crea un pipe que en sí, es un Que sería el equivalente a:

ng g p [name] transformador visual de la data.

<my-cmp
ng g service [name]
Crea un servicio, que en sí, [title]="name"
ng g s [name] permite compartir información (titleChange)="name=$event">
entre la aplicación.

Plantilla incrustadas

Banderas útiles a los comandos de generación

<p *myUnless="myExpression">
Bandera Descripción …
</p>
ng g c --help Muestra la ayuda completa de

todos los comandos Lo que sería equivalente a:

disponibles. <p *myUnless="myExpression">

ng g c [name] --dry-run Ejecuta el comando sin modi car …
ningún archivo. Útil si no se está </p>
seguro de lo que el comando hará

Uso de pipes:

Cursos y cupones en fernando-herrera.com

fi

fi
fi

fl
fi

 Angular sssssssssssssssssssssssssss
sssssss
sssssss
ssssssssssssssss
Guia de atajos
sssssss

<p>

Nombre: {{ 'fernando' | uppercase }} FormsModule de @angular/forms

</p>

<input [(ngModel)]="userName">

Operador de navegación segura

Decoradores de clase para componentes

<p> @Input: De ne una propiedad que puede ser enviada
Employer: {{employer?.companyName}} desde el padre hacia el componente hijo. @angular/core

</p>

@Input() myProperty;

Referencias locales en el html

Ejemplo:

<input #search type="text" /> <my-cmp [myProperty]="someExpression">

<video #movieplayer …></video>

<button (click)="movieplayer.play()"> @Output: De ne una salida del componente que el
Play componente padre puede suscribirse para escuchar.

</button> @Output() myEvent = new EventEmitter();

Ejemplo:

Directivas incluídas
<my-cmp (myEvent)=“someExpression”>
Las siguientes directivas vienen incluidas dentro del

módulo “CommonModule” de @angular/common

@HostBinding: Enlaza el elemento an trión (host) a la

*ngIf: Remueve o crea una parte del DOM basado en propiedad de la clase: @angular/core

la expresión “showSection”
@HostBinding('class.valid') isValid;

<section *ngIf="showSection">

@HostListener: Se suscribe al evento click del
an trión (host), opcionalmente se puede recibir el
*ngFor: Convierte el <li> en un template, y lo usa para evento. @angular/core

duplicarlo basado en la cantidad de elementos dentro

de la lista
@HostListener('click', ['$event'])
onClick(e) {…}
<li *ngFor="let item of list">

@ViewChild y @ViewChildren: Enlaza el resultado
nal de la vista del componente basado en el
ngSwitch: Condicionalmente cambia el contenido del predicado a la propiedad de la clase (no es válido para
<div> por el template que cumpla la condición.
directivas) @angular/core

<div [ngSwitch]="conditionExpression"> @ViewChild(myPredicate) myChildComponent;

<ng-template [ngSwitchCase]="case1Exp">
@ViewChildren(myPredicate) myChildComponent;
…

</ng-template>
<ng-template ngSwitchCase="case2LiteralString">
…
</ng-template> Ciclo de vida - Lifecycle Hooks

<ng-template ngSwitchDefault>
…
Estos son los pasos de ejecución cuando un
</ng-template> componente o directiva entra en pantalla.

</div>

Hook / Class Method Descripción

ngClass: Enlaza clases de css basado en un objeto o
expresión.
constructor
Se llama antes de cualquier
<div [ngClass]="{'active': isActive, ciclo de vida.
'disabled': isDisabled}">

ngOnChanges Antes de cualquier cambio a una
propiedad.
ngStyle: Permite asignar estilos a los elementos html
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
revisión de las vistas del function canActivateGuard: CanActivateFn =
componente o directiva. (
route: ActivatedRouteSnapshot,
ngOnDestroy Se llama justo antes de que el state: RouterStateSnapshot
componente o directiva va a ser ) => { … }
destruida.
# Definición de la ruta
{ 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 {
{ path: 'oldPath', redirectTo: '/staticPath' }, CanDeactivateFn, ActivatedRouteSnapshot,
{ path: …, component: …, RouterStateSnapshot } from "@angular/router"
data: { message: 'Custom' }
} function canDeactivateGuard: CanDeactivateFn<T> =
]); (
component: T,
const routing = RouterModule.forRoot(routes); route: ActivatedRouteSnapshot,

state: RouterStateSnapshot
) => { … }
En el HTML:

# Definición de la ruta
<router-outlet></router-outlet>

{ path: …, canDeactivate: [canDeactivateGuard] }

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' } ]">
CanDeactivate.

<a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">

<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 Pipes

Debe de implementar la interfaz de “CanActivate” para Este es un listado de los pipes propios de Angular

que Angular lo considere un pipe para proteger una Pipe Descripción

ruta a la hora de activarla.

DatePipe Realizar formateos a una fecha

class UserToken {}
class Permissions {
canActivate(): boolean { UpperCasePipe Capitaliza todo el texto
return true;
}
} LowerCasePipe Coloca en minúscula todo el texto

@Injectable() Formatea el número a un formato de moneda.

class CanActivateTeam implements CanActivate { CurrencyPipe
constructor(private permissions: Permissions,
private currentUser: UserToken) {} Transforma un número a un string con formato
DecimalPipe
especi cado
canActivate(
route: ActivatedRouteSnapshot, Transforma el número a un porcentaje string,
state: RouterStateSnapshot
PercentPipe
formateado basado en las reglas locales.
): Observable<boolean|UrlTree>|Promise<boolean|
UrlTree>|boolean|UrlTree { Espera el resultado de una tarea asíncrona
return
AsyncPipe
(Promise u Observable) e imprime la resolución
this.permissions.canActivate(this.currentUser, o emisión
route.params.id);
} Es una mapa de valores para ayudar con la
} I18nPluralPipe
localización de palabras

I18nSelectPipe Similar al anterior, pero para singulares

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

RxJS - Of
class AppModule {}

cial Docs
RxJS, es una librería incluída en Angular para poder
Pero también se puede de nir en línea con la siguiente trabajar con observables y en sí, la programación
función.
reactiva.

@NgModule({
imports: [
RouterModule.forRoot([ Hay muchos operadores y funciones para generar
{ observables que se usan en Angular, considere
path: 'team/:id', estudiar RxJS para poder reducir la cantidad de
component: TeamComponent,
canActivate: [ código de los observables y hacer el trabajo más
(route: ActivatedRouteSnapshot, state: simple.

RouterStateSnapshot) => true

]
} 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 16+) Mutate

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 mutate. Es
particularmente útil para objetos.

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.mutate(value => {

value[0].done = true;
Son señales que pueden cambiarse manualmente, se });

pueden usar como simples variables reactivas:

import { signal } from '@angular/core'; Importante:

Para las señales que son modi cadas mediante el
mutate, no se revisa la equidad, es decir, una llamada
const count = signal(0);
al mutate disparará efecto y otras propiedades
console.log( 'Count es: ' + count() ); computadas a pesar que de sea el mimo valor al cual

se cambió.

Se usan los paréntesis para obtener su valor.

O como propiedades de clase (preferido) (se pueden

Computed Signals
usar en servicios, componentes, directivas, funciones, etc) Básicamente son señales de sólo lectura, pero es un
valor que puede cambiar únicamente si una señal
export class AppComponent {
usada para crearlo cambia.

public count = signal(0);

const count = signal<number>(0);
const doubleCount = computed(() => count() * 2);
}

En este caso, doubleCount sólo cambiará, si count

Para actualizar el valor de una señal, hay 3 formas
cambia. Esto sucede automáticamente.

Set Tanto las señales computadas como los efectos (ver

siguiente tema), pueden tener tantas señales internas
Para establecer un valor a la señal sin importar el valor
como sea necesario

que tuviera anteriormente. Si el valor es el mismo que

antes, los efectos y señales computadas no se vuelven const showCount = signal(false);
a disparar.
const count = signal(0);
public count = signal(0); const conditionalCount = computed(() =>
{
changeSignal() { if (showCount()) {
this.count.set(10); return `The count is ${count()}.`;
} } else {

return 'Nothing to see here!';

}
Update });

Si se desea cambiar el valor de la señal dependiendo

del valor que tenga anteriormente, se puede utilizar el Referencias:
método update.
https://angular.io/guide/signals#advanced-topics

public count = signal(0);

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

Cursos y cupones en fernando-herrera.com

fi

 Angular
Guia de atajos

Effects En constructor:
Un efecto es una operación que se ejecuta al menos @Component({...})
una vez (similar al ngOnInit), pero si usa alguna señal, y export class EffectiveCounterCmp {
readonly count = signal(0);
esa señal cambia, el efecto se vuelve a ejecutar.
constructor() {
effect(() => { // Registrar el efecto
effect(() => {
console.log(`The current count is: ${count()}`); console.log(`The count is: ${this.count()})`);
}); });

}
}
El efecto retorna un E ectRef, que a su vez tiene un
método destroy, en el caso que quieras destruir el

efecto manualmente.

Como propiedades de clase:

Los efectos a menos de especi car lo contrario, se
@Component({...})
limpian a si mismos cuando no son necesarios.
export class EffectiveCounterCmp {
readonly count = signal(0);

Usos comunes de efectos

private loggingEffect = effect(() => {
console.log(`The count is: ${this.count()})`);
});
}
- Mostrar logs, cuando la data cambia, ya sea para

analytics o depuración.

Si se necesita crear un efecto fuera de esos lugares, se

- Mantener la data en sincronía (window.localStorage)
puede mediante opciones y un servicio de inyección
(Injector), más información aquí

- Añadir comportamiento al DOM cuando la sintaxis

de template no pueda hacerlo.

- Realizar renderizado personalizado a un canvas, Effect cleanup functions

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

Cuando NO usar efectos

Evitar efectos para propagar cambios de estado, esto
puede resultar en el error effect((onCleanup) => {
const user = currentUser();
ExpressionChangedAfterItHasBeenChecked,
actualizaciones circulares in nitas o cambios no const timer = setTimeout(() => {
console.log(`1 second ago, the user became ${user}`);
deseados.
}, 1000);

onCleanup(() => {
Debido a esto, las señales por defecto marcan clearTimeout(timer);
});
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.

Referencia:

https://angular.io/guide/signals#e ect-cleanup-functions

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.

Cursos y cupones en fernando-herrera.com

fi

ff

fi
ff

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

sEApunsbPgffao

fi

fi

fi

fi

fl