angular/aio/content/guide/cheatsheet.md

Cheat Sheet

Bootstrapping	import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule);	Carga la app, usando el componente raíz del NgModule especificado.

NgModules	import { NgModule } from '@angular/core';
@NgModule({ declarations: ..., imports: ..., exports: ..., providers: ..., bootstrap: ...}) class MyModule {}	Define un módulo que contiene componentes, directivas, pipes y proveedores.
declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]	Lista de componentes, directivas y pipes que pertenecen a este módulo.
imports: [BrowserModule, SomeOtherModule]	Lista de módulos para importar en este módulo. Todo, desde los módulos importados, está disponible para las declaraciones (declarations) de este módulo.
exports: [MyRedComponent, MyDatePipe]	Lista de componentes, directivas y pipes visibles a los módulos que importan este módulo.
providers: [MyService, { provide: ... }]	Lista de proveedores de inyección de dependencias visibles tanto para los contenidos de este módulo como para los importadores de este módulo.
entryComponents: [SomeComponent, OtherComponent]	Lista de componentes no referenciados en cualquier plantilla accesible, por ejemplo, creada dinámicamente a partir de código.
bootstrap: [MyAppComponent]	Lista de componentes a empaquetar cuando este módulo se inicia.

Sintaxis de plantilla
<input [value]="firstName">	Vincula la propiedad value al resultado de la expresión firstName.
<div [attr.role]="myAriaRole">	Vincula el atributo role al resultado de la expresión myAriaRole.
<div [class.extra-sparkle]="isDelightful">	Vincula la presencia de la clase CSS extra-sparkle sobre el elemento a la veracidad de la expresión isDelightful.
<div [style.width.px]="mySize">	Vincula la propiedad de estilo width al resultado de la expresión mySize en píxeles. La unidad de medida es opcional.
<button (click)="readRainbow($event)">	Llama al método readRainbow cuando se lanza un evento click en este elemento botón (o sus hijos) y pasa por argumento el objeto evento.
<div title="Hola {{ponyName}}">	Vincula una propiedad a una cadena interpolada, por ejemplo, "Hola Seabiscuit". Equivalente a:	Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to: <div [title]="'Hola ' + ponyName">
<p>Hola {{ponyName}}</p>	Vincula el contenido de texto a una cadena interpolada, por ejemplo, "Hola Seabiscuit".
<my-cmp [(title)]="name">	Establece el two-way data binding. Equivalente a: <my-cmp [title]="name" (titleChange)="name=$event">
<video #movieplayer ...> <button (click)="movieplayer.play()"> </video>	Crea una variable local movieplayer que provee acceso a la instancia del elemento video en las expresiones de data-binding y event-binding de la actual plantilla.
<p *myUnless="myExpression">...</p>	El símbolo * convierte el elemento actual en una plantilla incrustada. Equivalente a: <ng-template [myUnless]="myExpression"><p>...</p></ng-template>
<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>	Transforma el valor actual de la expresión cardNumber a través de la pipe myCardNumberFormatter.
<p>Employer: {{employer?.companyName}}</p>	El operador de navegación seguro (?) significa que el campo employer es opcional y que si es undefined, el resto de la expresión debería ser ignorado.
<svg:rect x="0" y="0" width="100" height="100"/>	Una plantilla de fragmento SVG necesita un prefijo svg: en su elemento raíz para distinguir el elemento SVG de un componente HTML.
<svg> <rect x="0" y="0" width="100" height="100"/> </svg>	Un elemento raíz <svg> es detectado como un elemento SVG automáticamente, sin el prefijo.

Te permite asignar estilos a un elemento HTML usando CSS. Puedes usar CSS directamente, como en el primer ejemplo, o puedes llamar a un método desde el componente.

Directivas incorporadas	import { CommonModule } from '@angular/common';
<section *ngIf="showSection">	Elimina o recrea una parte del árbol DOM basado en la expresión showSection.
<li *ngFor="let item of list">	Convierte el elemento li y su contenido en una plantilla, y lo utiliza para crear una vista por cada elemento de la lista.
<div [ngSwitch]="conditionExpression"> <ng-template [ngSwitchCase]="case1Exp">...</ng-template> <ng-template ngSwitchCase="case2LiteralString">...</ng-template> <ng-template ngSwitchDefault>...</ng-template> </div>	Intercambia condicionalmente el contenido del div seleccionando una de las plantillas incrustadas en función del valor actual de conditionExpression.
<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">	Vincula la presencia de clases CSS en el elemento a la veracidad de los valores de mapa asociados. La expresión de la derecha debería devolver el mapa {class-name: true/false}.
<div [ngStyle]="{'property': 'value'}"> <div [ngStyle]="dynamicStyles()">

Formularios	import { FormsModule } from '@angular/forms';
<input [(ngModel)]="userName">	Provee two-way data-binding, conversión y validación para controles de formulario.

Decoradores de clases	import { Directive, ... } from '@angular/core';
@Component({...}) class MyComponent() {}	Declara que una clase es un componente y proporciona metadatos sobre el componente.
@Directive({...}) class MyDirective() {}	Declara que una clase es una directiva y proporciona metadatos sobre la directiva.
@Pipe({...}) class MyPipe() {}	Declara que una clase es una pipe y proporciona metadatos sobre la pipe.
@Injectable() class MyService() {}	Declara que una clase puede ser proporcionada e inyectada por otras clases. Sin este decorador, el compilador no generará suficientes metadatos para permitir que la clase se cree correctamente cuando se inyecta en alguna parte.

Configuración de Directiva	@Directive({ property1: value1, ... })
selector: '.cool-button:not(a)'	Especifica un selector CSS que identifica esta directiva dentro de una plantilla. Los selectores compatibles incluyen element, [attribute], .class, and :not(). No soporta selectores de relación padre-hijo.
providers: [MyService, { provide: ... }]	Lista de proveedores de inyección de dependencia para esta directiva y sus hijos.

Configuración de Componente	@Component extiende @Directive, entonces la configuración de @Directive se aplica también a los componentes
moduleId: module.id	Si está presente, el templateUrl y styleUrl se resuelven en relación con el componente.
viewProviders: [MyService, { provide: ... }]	Lista de proveedores de inyección de dependencias en la vista de este componente.
template: 'Hola {{name}}' templateUrl: 'my-component.html'	Plantilla en línea o URL de plantilla externa de la vista del componente.
styles: ['.primary {color: red}'] styleUrls: ['my-component.css']	Lista de estilos CSS en línea o URL de hojas de estilo externas para estilar la vista del componente.

Decoradores para los campos de la clase para directivas y componentes.	import { Input, ... } from '@angular/core';
@Input() myProperty;	Declara una propiedad de entrada (input) que puede actualizar mediante el enlace de propiedad (property binding) (ejemplo: <my-cmp [myProperty]="someExpression">).
@Output() myEvent = new EventEmitter();	Declara una propiedad de salida (output) que dispara eventos a los que puedes suscribirse con un enlace de evento (event binding) (ejemplo: <my-cmp (myEvent)="doSomething()">).
@HostBinding('class.valid') isValid;	Vincula una propiedad del elemento anfitrión (aquí, la clase CSS valid) a una propiedad de directiva/componente (isValid).
@HostListener('click', ['$event']) onClick(e) {...}	Se suscribe a un evento del elemento anfitrión (click) con un método de directiva/componente (onClick), opcionalmente, pasando un argumento ($event).
@ContentChild(myPredicate) myChildComponent;	Vincula el primer resultado de la consulta de contenido del componente (myPredicate) a una propiedad (myChildComponent) de la clase.
@ContentChildren(myPredicate) myChildComponents;	Vincula los resultados de la consulta de contenido del componente (myPredicate) a una propiedad (myChildComponents) de la clase.
@ViewChild(myPredicate) myChildComponent;	Vincula el primer resultado de la consulta de vista del componente (myPredicate) a una propiedad (myChildComponent) de la clase. No disponible para directivas.
@ViewChildren(myPredicate) myChildComponents;	Vincula los resultados de la consulta de vista del componente (myPredicate) a una propiedad (myChildComponents) de la clase. No disponible para directivas.

Detección de cambios (change detection) y ciclos de vida (lifecycle hooks) en directivas y componentes	(implementado como métodos de clase)
constructor(myService: MyService, ...) { ... }	Se llama antes que cualquier ciclo de vida. Úselo para inyectar dependencias, pero evite cualquier trabajo serio aquí.
ngOnChanges(changeRecord) { ... }	Se llama después de cada cambio en las propiedades de entrada (input) y antes de procesar contenido o vistas de hijos.
ngOnInit() { ... }	Se llama después del constructor, inicializando propiedades de entrada (input), y la primera llamada a ngOnChanges.
ngDoCheck() { ... }	Se llama cada vez que se verifican las propiedades de entrada (input) de un componente o una directiva. Úselo para extender la detección de cambios (change detection) realizando una verificación personalizada.
ngAfterContentInit() { ... }	Se llama después de ngOnInit cuando el contenido del componente o directiva ha sido inicializado.
ngAfterContentChecked() { ... }	Se llama después de cada verificación del contenido del componente o directiva.
ngAfterViewInit() { ... }	Se llama después de ngAfterContentInit cuando las vistas del componente y las vistas hijas / la vista en la que se encuentra una directiva ha sido inicializado.
ngAfterViewChecked() { ... }	Se llama después de cada verificación de las vistas del componentes y las vistas hijas / la vista en la que se encuentra una directiva.
ngOnDestroy() { ... }	Se llama una vez, antes de que la instancia se destruya.

Configuración de inyección de dependencia
{ provide: MyService, useClass: MyMockService }	Establece o sobre-escribe el proveedor para MyService en la clase MyMockService.
{ provide: MyService, useFactory: myFactory }	Establece o sobre-escribe el proveedor para MyService en la factoría de función myFactory.
{ provide: MyValue, useValue: 41 }	Establece o sobre-escribe el proveedor para MyValue al valor 41.

Enrutamiento y navegación	import { Routes, RouterModule, ... } from '@angular/router';
const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'path/:routeParam', component: MyComponent }, { path: 'staticPath', component: ... }, { path: '**', component: ... }, { path: 'oldPath', redirectTo: '/staticPath' }, { path: ..., component: ..., data: { message: 'Custom' } } ]); const routing = RouterModule.forRoot(routes);	Configura rutas para la aplicación. Soporta rutas estáticas, parametrizadas, de redireccionamiento y comodines. También soporta datos de ruta personalizados y los resuelve.
<router-outlet></router-outlet> <router-outlet name="aux"></router-outlet>	Marca la ubicación para cargar el componente de la ruta activa.
<a routerLink="/path"> <a [routerLink]="[ '/path', routeParam ]"> <a [routerLink]="[ '/path', { matrixParam: 'value' } ]"> <a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }"> <a [routerLink]="[ '/path' ]" fragment="anchor">	Crea un enlace a una vista diferente basada en una instrucción de ruta que consta de un camino de de ruta, parámetros obligatorios y opcionales, parámetros de consulta y un fragmento. Para navegar a un camino de ruta, usa el prefijo /; para una ruta hija, usa el prefijo ./; para un padre o hermano, usa el prefijo ../.
<a [routerLink]="[ '/path' ]" routerLinkActive="active">	Las clases proporcionadas se agregan al elemento cuando el routerLink se convierte en la ruta activa actual.
class CanActivateGuard implements CanActivate { canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... } } { path: ..., canActivate: [CanActivateGuard] }	Una interfaz para definir una clase que el enrutador debe llamar primero para determinar si debe activar este componente. Debe devolver un boolean|UrlTree o un Observable/Promise que se resuelba en un boolean|UrlTree.
class CanDeactivateGuard implements CanDeactivate<T> { canDeactivate( component: T, route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... } } { path: ..., canDeactivate: [CanDeactivateGuard] }	Una interfaz para definir una clase que el enrutador debería llamar primero para determinar si debería desactivar este componente después de una navegación. Debe devolver un boolean|UrlTree o un Observable/Promise que se resuelva a boolean|UrlTree.
class CanActivateChildGuard implements CanActivateChild { canActivateChild( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... } } { path: ..., canActivateChild: [CanActivateGuard], children: ... }	Una interfaz para definir una clase que el enrutador debe llamar primero para determinar si debe activar la ruta hija. Debe devolver un boolean|UrlTree o un Observable/Promise que se resuelva en un boolean|UrlTree.
class ResolveGuard implements Resolve<T> { resolve( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<any>|Promise<any>|any { ... } } { path: ..., resolve: [ResolveGuard] }	Una interfaz para definir una clase que el enrutador debe llamar primero para resolver los datos de la ruta antes de representar la ruta. Debe devolver un valor o un Observable/Promise que se resuelva en un valor.
class CanLoadGuard implements CanLoad { canLoad( route: Route ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... } } { path: ..., canLoad: [CanLoadGuard], loadChildren: ... }	Una interfaz para definir una clase a la que el enrutador debe llamar primero para verificar si el módulo perezoso cargado (lazy loaded module) debe cargarse. Debe devolver un boolean|UrlTree o un Observable/Promise que se resuelva en un boolean|UrlTree.