platformBrowserDynamic().bootstrapModule(AppModule);Bootstraps the app, using the root component from the specified NgModule.
Empaqueta la app, usando el componente raíz del NgModule especificado.
@NgModule({ declarations: ..., imports: ...,
exports: ..., providers: ..., bootstrap: ...})
class MyModule {}Defines a module that contains components, directives, pipes, and providers.
+Define un módulo que contiene componentes, directivas, tuberías y proveedores.
declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]List of components, directives, and pipes that belong to this module.
+Lista de componentes, directivas y tuberías que pertenecen a este módulo.
imports: [BrowserModule, SomeOtherModule]List of modules to import into this module. Everything from the imported modules
-is available to declarations of this module.
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]List of components, directives, and pipes visible to modules that import this module.
+Lista de componentes, directivas y tuberías visibles a los módulos que importan este módulo.
providers: [MyService, { provide: ... }]List of dependency injection providers visible both to the contents of this module and to importers of this module.
+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]List of components not referenced in any reachable template, for example dynamically created from code.
Lista de componentes no referenciados en cualquier plantilla accesible, por ejemplo, creada dinámicamente a partir de código.
bootstrap: [MyAppComponent]List of components to bootstrap when this module is bootstrapped.
+Lista de componentes a empaquetar cuando este módulo se inicia.
| Template syntax | +Sintaxis de plantilla | ||
|---|---|---|---|
<input [value]="firstName"> |
-Binds property | Vincula la propiedad |
|
<div [attr.role]="myAriaRole"> |
-Binds attribute | Vincula el atributo |
|
<div [class.extra-sparkle]="isDelightful"> |
-Binds the presence of the CSS class | Vincula la presencia de la clase CSS |
|
<div [style.width.px]="mySize"> |
-Binds style property | Vincula la propiedad de estilo |
|
<button (click)="readRainbow($event)"> |
-Calls method | Llama al método |
|
<div title="Hello {{ponyName}}"> |
+<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>Hello {{ponyName}}</p> |
-Binds text content to an interpolated string, for example, "Hello Seabiscuit". + | <p>Hola {{ponyName}}</p> |
+Vincula el contenido de texto a una cadena interpolada, por ejemplo, "Hola Seabiscuit". |
<my-cmp [(title)]="name"> |
-Sets up two-way data binding. Equivalent to: | Establece el two-way data binding. Equivalente a: |
|
<video #movieplayer ...> |
-Creates a local variable | Crea una variable local |
|
<p *myUnless="myExpression">...</p> |
-The | El símbolo |
|
<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p> |
-Transforms the current value of expression | Transforma el valor actual de la expresión |
|
<p>Employer: {{employer?.companyName}}</p> |
-The safe navigation operator ( | El operador de navegación seguro ( |
|
<svg:rect x="0" y="0" width="100" height="100"/> |
-An SVG snippet template needs an | Una plantilla de fragmento SVG necesita un prefijo |
|
<svg> |
-An | Un elemento raíz |
| Built-in directives | +Directivas incorporadas |
|
|---|---|---|
<section *ngIf="showSection"> |
-Removes or recreates a portion of the DOM tree based on the | Elimina o recrea una parte del árbol DOM basado en la expresión |
<li *ngFor="let item of list"> |
-Turns the li element and its contents into a template, and uses that to instantiate a view for each item in 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"> |
-Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of | Intercambia condicionalmente el contenido del div seleccionando una de las plantillas incrustadas en función del valor actual de |
<div [ngClass]="{'active': isActive, 'disabled': isDisabled}"> |
-Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand expression should return {class-name: true/false} map. + | 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()"> |
-Allows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the first example, or you can call a method from the component. + | Le permite asignar estilos a un elemento HTML usando CSS. Puede usar CSS directamente, como en el primer ejemplo, o puede llamar a un método desde el componente. |
| Forms | +Formularios |
|
|---|---|---|
<input [(ngModel)]="userName"> |
-Provides two-way data-binding, parsing, and validation for form controls. + | Provee two-way data-binding, conversión y validación para controles de formulario. |
| Class decorators | +Decoradores de clases |
|
|---|---|---|
@Component({...}) |
-Declares that a class is a component and provides metadata about the component. + | Declara que una clase es un componente y proporciona metadatos sobre el componente. |
@Directive({...}) |
-Declares that a class is a directive and provides metadata about the directive. + | Declara que una clase es una directiva y proporciona metadatos sobre la directiva. |
@Pipe({...}) |
-Declares that a class is a pipe and provides metadata about the pipe. + | Declara que una clase es una tubería and y proporciona metadatos sobre la tubería. |
@Injectable() |
-Declares that a class can be provided and injected by other classes. Without this decorator, the compiler won't generate enough metadata to allow the class to be created properly when it's injected somewhere. + | 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. |
| Directive configuration | +Configuración de Directiva |
|
|---|---|---|
selector: '.cool-button:not(a)' |
-Specifies a CSS selector that identifies this directive within a template. Supported selectors include | Especifica un selector CSS que identifica esta directiva dentro de una plantilla. Los selectores compatibles incluyen Does not support parent-child relationship selectors. +No soporta selectores de relación padre-hijo. |
providers: [MyService, { provide: ... }] |
-List of dependency injection providers for this directive and its children. + | Lista de proveedores de inyección de dependencia para esta directiva y sus hijos. |
| Component configuration | +Configuración de Componente |
- @Component extiende @Directive,
+entonces la configuración de @Directive se aplica también a los componentes
|
|
|---|---|---|---|
moduleId: module.id |
-If set, the | Si está presente, el |
|
viewProviders: [MyService, { provide: ... }] |
-List of dependency injection providers scoped to this component's view. + | Lista de proveedores de inyección de dependencias en la vista de este componente. |
|
template: 'Hello {{name}}' |
-Inline template or external template URL of the component's view. + | template: 'Hola {{name}}' |
+Plantilla en línea o URL de plantilla externa de la vista del componente. |
styles: ['.primary {color: red}'] |
-List of inline CSS styles or external stylesheet URLs for styling the component’s view. + | Lista de estilos CSS en línea o URL de hojas de estilo externas para estilar la vista del componente. |
| Class field decorators for directives and components | +Decoradores para los campos de la clase para directivas y componentes. |
|
|---|---|---|
@Input() myProperty; |
-Declares an input property that you can update via property binding (example: + | Declara una propiedad de entrada (input) que puede actualizar mediante el enlace de propiedad (property binding) (ejemplo:
|
@Output() myEvent = new EventEmitter(); |
-Declares an output property that fires events that you can subscribe to with an event binding (example: | Declara una propiedad de salida (output) que dispara eventos a los que puede suscribirse con un enlace de evento (event binding) (ejemplo: |
@HostBinding('class.valid') isValid; |
-Binds a host element property (here, the CSS class | Vincula una propiedad del elemento anfitrión (aquí, la clase CSS |
@HostListener('click', ['$event']) onClick(e) {...} |
-Subscribes to a host element event ( | Se suscribe a un evento del elemento anfitrión ( |
@ContentChild(myPredicate) myChildComponent; |
-Binds the first result of the component content query ( | Vincula el primer resultado de la consulta de contenido del componente ( |
@ContentChildren(myPredicate) myChildComponents; |
-Binds the results of the component content query ( | Vincula los resultados de la consulta de contenido del componente ( |
@ViewChild(myPredicate) myChildComponent; |
-Binds the first result of the component view query ( | Vincula el primer resultado de la consulta de vista del componente ( |
@ViewChildren(myPredicate) myChildComponents; |
-Binds the results of the component view query ( | Vincula los resultados de la consulta de vista del componente ( |
| Directive and component change detection and lifecycle hooks | -(implemented as class methods) + + | 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, ...) { ... } |
-Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here. + | Se llama antes que cualquier ciclo de vida. Úselo para inyectar dependencias, pero evite cualquier trabajo serio aquí. |
|
ngOnChanges(changeRecord) { ... } |
-Called after every change to input properties and before processing content or child views. + | Se llama después de cada cambio en las propiedades de entrada (input) y antes de procesar contenido o vistas de hijos. |
|
ngOnInit() { ... } |
-Called after the constructor, initializing input properties, and the first call to | Se llama después del constructor, inicializando propiedades de entrada (input), y la primera llamada a |
|
ngDoCheck() { ... } |
-Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check. + | 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() { ... } |
-Called after | Se llama después de |
|
ngAfterContentChecked() { ... } |
-Called after every check of the component's or directive's content. + | Se llama después de cada verificación del contenido del componente o directiva. |
|
ngAfterViewInit() { ... } |
-Called after | Se llama después de |
|
ngAfterViewChecked() { ... } |
-Called after every check of the component's views and child views / the view that a directive is in. + | 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() { ... } |
-Called once, before the instance is destroyed. + | Se llama una vez, antes de que la instancia se destruya. |
| Dependency injection configuration | +Configuración de inyección de dependencia | |
|---|---|---|
{ provide: MyService, useClass: MyMockService } |
-Sets or overrides the provider for | Establece o sobre-escribe el proveedor para |
{ provide: MyService, useFactory: myFactory } |
-Sets or overrides the provider for | Establece o sobre-escribe el proveedor para |
{ provide: MyValue, useValue: 41 } |
-Sets or overrides the provider for | Establece o sobre-escribe el proveedor para |
| Routing and navigation | +Enrutamiento y navegación |
|
|---|---|---|
const routes: Routes = [ |
-Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve. + | 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. |
|
-Marks the location to load the component of the active route. + | Marca la ubicación para cargar el componente de la ruta activa. |
|
-Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the | 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 |
<a [routerLink]="[ '/path' ]" routerLinkActive="active"> |
-The provided classes are added to the element when the | Las clases proporcionadas se agregan al elemento cuando el |
class CanActivateGuard implements CanActivate { |
-An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree. + | 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> { |
-An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree. + | 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 { |
-An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree. + | 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> { |
-An interface for defining a class that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value. + | 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 { |
-An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree. + | 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. |