Bootstrapping

import platformBrowserDynamic from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule);

Inicia la aplicación, utilizando el componente raíz del especificado NgModule.

NgModules

import NgModule from '@angular/core';
@NgModule(
declarations: ..., imports: ..., exports: ...,
providers: ..., bootstrap: ...
)
class MyModule

Define un módulo que contiene componentes, directivas, canalizaciones y proveedores.
declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]

Lista de componentes, directivas y canalizaciones que pertenecen a este módulo.
imports: [BrowserModule, SomeOtherModule]

Lista de módulos para importar a este módulo. Todo, desde los módulos importados, está disponible para declarations de este módulo.
exports: [MyRedComponent, MyDatePipe]

Lista de componentes, directivas y canalizaciones visibles para los módulos que importan este módulo.
providers: [MyService, provide: ... ]

Lista de proveedores de inyección de dependencia visibles tanto para el contenido de este módulo como para los importadores de este módulo.
entryComponents: [SomeComponent, OtherComponent]

Lista de componentes a los que no se hace referencia en ninguna plantilla accesible, por ejemplo, creados dinámicamente a partir de código.
bootstrap: [MyAppComponent]

Lista de componentes para arrancar cuando se arranca este módulo.
Sintaxis de la plantilla
[value]="firstName">

Vincula la propiedad value al resultado de la expresión firstName.

[attr.role]="myAriaRole">

Vincula el atributo role al resultado de la expresión myAriaRole.

[class.extra-sparkle]="isDelightful">

Vincula la presencia de la clase CSS extra-sparkle sobre el elemento a la veracidad de la expresión isDelightful.

[style.width.px]="mySize">

Vincula la propiedad de estilo width al resultado de la expresión mySize en píxeles. Las unidades son opcionales.

Método de llamadas readRainbow cuando se activa un evento de clic en este elemento de botón (o sus hijos) y pasa el objeto de evento.

Vincula una propiedad a una cadena interpolada, por ejemplo, “Hello Seabiscuit”. Equivalente a:

Hello ponyName

Vincula contenido de texto a una cadena interpolada, por ejemplo, “Hello Seabiscuit”.
[(title)]="name">

Configura el enlace de datos bidireccional. Equivalente a:



Crea una variable local movieplayer que proporciona acceso a la video instancia de elemento en expresiones de enlace de datos y enlace de eventos en la plantilla actual.

*myUnless="myExpression">...

los * El símbolo convierte el elemento actual en una plantilla incrustada. Equivalente a:

...

Card No.: myCardNumberFormatter

Transforma el valor actual de expresión cardNumber a través de la tubería llamada myCardNumberFormatter.

Employer: employer?.companyName

El operador de navegación segura (?) significa que el employer el campo es opcional y si undefined, el resto de la expresión debe ignorarse.
<svg:rect x="0" y="0" width="100" height="100"/>

Una plantilla de fragmento de SVG necesita un svg: prefijo en su elemento raíz para eliminar la ambigüedad del elemento SVG de un componente HTML.
<svg>

svg>

Un El elemento raíz se detecta como un elemento SVG automáticamente, sin el prefijo.
Directivas integradas

import CommonModule from '@angular/common';

*ngIf="showSection">

Elimina o recrea una parte del árbol DOM basado en el showSection expresión.

  • *ngFor="let item of list">
    		•

    Convierte el elemento li y su contenido en una plantilla y lo usa para crear una instancia de una vista para cada elemento de la lista.

    [ngSwitch]="conditionExpression">
    [ngSwitchCase]="case1Exp">...
    ngSwitchCase="case2LiteralString">...
    ngSwitchDefault>...

    Intercambia condicionalmente el contenido del div seleccionando una de las plantillas incrustadas según el valor actual de conditionExpression.

    [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 debe devolver el mapa class-name: true / false.

    [ngStyle]="'property': 'value'">

    [ngStyle]="dynamicStyles()">

    Le permite asignar estilos a un elemento HTML mediante CSS. Puede usar CSS directamente, como en el primer ejemplo, o puede llamar a un método desde el componente.
    Formularios

    import FormsModule from '@angular/forms';
    [(ngModel)]="userName">

    Proporciona enlace de datos bidireccional, análisis y validación para controles de formulario.
    Decoradores de clase

    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 tubería y proporciona metadatos sobre la tubería.
    @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 algún lugar.
    Configuración directiva

    @Directive( property1: value1, ... )
    selector: '.cool-button:not(a)'

    Especifica un selector de CSS que identifica esta directiva dentro de una plantilla. Los selectores compatibles incluyen element, [attribute], .class, y :not().

    No admite selectores de relaciones entre padres e hijos.
    providers: [MyService, provide: ... ]

    Lista de proveedores de inyección de dependencia para esta directiva y sus hijos.
    Configuración de componentes

    @Component se extiende @Directive, entonces el @Directive la configuración también se aplica a los componentes
    moduleId: module.id

    Si está configurado, el templateUrl y styleUrl se resuelven en relación con el componente.
    viewProviders: [MyService, provide: ... ]

    Lista de proveedores de inyección de dependencia dentro del ámbito de la vista de este componente.
    template: 'Hello 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 diseñar la vista del componente.
    Decoradores de campo de clase para directivas y componentes

    import Input, ... from '@angular/core';
    @Input() myProperty;

    Declara una propiedad de entrada que puede actualizar mediante el enlace de propiedad (ejemplo: ).
    @Output() myEvent = new EventEmitter();

    Declara una propiedad de salida que activa eventos a los que puede suscribirse con un enlace de eventos (ejemplo: ).
    @HostBinding('class.valid') isValid;

    Vincula una propiedad de elemento de host (aquí, la clase CSS valid) a una propiedad de directiva / componente (isValid).
    @HostListener('click', ['$event']) onClick(e) ...

    Se suscribe a un evento de elemento anfitrión (click) con un método de directiva / componente (onClick), pasando opcionalmente 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 la vista de componentes (myPredicate) a una propiedad (myChildComponent) de la clase. No disponible para directivas.
    @ViewChildren(myPredicate) myChildComponents;

    Vincula los resultados de la consulta de la vista de componentes (myPredicate) a una propiedad (myChildComponents) de la clase. No disponible para directivas.
    Detección de cambios de directivas y componentes y enlaces del ciclo de vida

    (implementado como métodos de clase)

    constructor(myService: MyService, ...) ...

    Se llama antes que cualquier otro enlace del 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 y antes de procesar el contenido o las vistas secundarias.
    ngOnInit() ...

    Se llama después del constructor, inicializa las propiedades de entrada y la primera llamada a ngOnChanges.
    ngDoCheck() ...

    Se llama cada vez que se comprueban las propiedades de entrada de un componente o una directiva. Úselo para ampliar la detección de cambios realizando una comprobación personalizada.
    ngAfterContentInit() ...

    Llamado después de ngOnInit cuando se ha inicializado el contenido del componente o de la directiva.
    ngAfterContentChecked() ...

    Se llama después de cada verificación del contenido del componente o de la directiva.
    ngAfterViewInit() ...

    Llamado después de ngAfterContentInit cuando las vistas del componente y las vistas secundarias / la vista en la que se encuentra una directiva se ha inicializado.
    ngAfterViewChecked() ...

    Se llama después de cada verificación de las vistas del componente y las vistas secundarias / la vista en la que se encuentra una directiva.
    ngOnDestroy() ...

    Se llama una vez, antes de que se destruya la instancia.
    Configuración de inyección de dependencia
    provide: MyService, useClass: MyMockService

    Establece o anula el proveedor para MyService al MyMockService clase.
    provide: MyService, useFactory: myFactory

    Establece o anula el proveedor para MyService al myFactory función de fábrica.
    provide: MyValue, useValue: 41

    Establece o anula 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. Admite rutas estáticas, parametrizadas, redireccionadas y con comodines. También admite datos de ruta personalizados y resolución.
    <router-outlet>router-outlet>
    <router-outlet name="aux">router-outlet>

    Marca la ubicación para cargar el componente de la ruta activa.
    routerLink="/path">
    [routerLink]="[ '/path', routeParam ]">
    [routerLink]="[ '/path', matrixParam: 'value' ]">
    [routerLink]="[ '/path' ]" [queryParams]=" page: 1 ">
    [routerLink]="[ '/path' ]" fragment="anchor">

    Crea un enlace a una vista diferente basada en una instrucción de ruta que consta de una ruta de ruta, parámetros obligatorios y opcionales, parámetros de consulta y un fragmento. Para navegar a una ruta raíz, use el / prefijo; para una ruta secundaria, use el ./prefijo; para un hermano o padre, use el ../ prefijo.
    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

    path: ..., canActivate: [CanActivateGuard]

    Una interfaz para definir una clase a la que el enrutador debe llamar primero para determinar si debe activar este componente. Debe devolver un booleano | UrlTree o un Observable / Promise que se resuelve en un booleano | UrlTree.
    class CanDeactivateGuard implements CanDeactivate
    canDeactivate(
    component: T,
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
    ): Observable

    path: ..., canDeactivate: [CanDeactivateGuard]

    Una interfaz para definir una clase a la que el enrutador debe llamar primero para determinar si debe desactivar este componente después de una navegación. Debe devolver un booleano | UrlTree o un Observable / Promise que se resuelve en un booleano | UrlTree.
    class CanActivateChildGuard implements CanActivateChild UrlTree>

    path: ..., canActivateChild: [CanActivateGuard],
    children: ...

    Una interfaz para definir una clase a la que el enrutador debe llamar primero para determinar si debe activar la ruta secundaria. Debería devolver un booleano | UrlTree o un Observable / Promise que se resuelve en un booleano | UrlTree.
    class ResolveGuard implements Resolve any ...

    path: ..., resolve: [ResolveGuard]

    Una interfaz para definir una clase a la 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 resuelve en un valor.
    class CanLoadGuard implements CanLoad Promise

    path: ..., canLoad: [CanLoadGuard], loadChildren: ...

    Una interfaz para definir una clase a la que el enrutador debe llamar primero para verificar si se debe cargar el módulo de carga diferida. Debe devolver un booleano | UrlTree o un Observable / Promise que se resuelve en un booleano | UrlTree.