Las aplicaciones en general presentan diferentes vistas, en el caso de aplicaciones web de tipo SPA (Single Page Application), el poder cambiar de vistas es un proceso normal, pero que por la naturaleza del tipo de aplicación requiere algunas tomar algunas consideraciones. En Angular, este proceso es realizado por el sistema de enrutamiento (Angular Router), el cual permite gestionar la navegación entre diferentes vistas sin necesidad de recargar la página (principio básico de las SPA)

¿Cómo funciona el enrutamiento en Angular?

El enrutamiento en Angular se basa en la manipulación del historial del navegador utilizando la API de History de JavaScript. Cuando el usuario cambia de ruta, Angular intercepta la petición y renderiza el componente correspondiente dentro del RouterOutlet sin necesidad de recargar la página.

Tipos de Rutas en Angular

En Angular, existen diferentes tipos de rutas que podemos implementar según nuestras necesidades:

🔹 Rutas Estáticas

Son rutas predefinidas en la aplicación y no cambian en función de los datos o acciones del usuario. Se definen con un path o camino fijo.

Ejemplo:

const routes: Routes = [ 
	{ path: 'home', component: HomeComponent }, 
    { path: 'about', component: AboutComponent } 
];

🔹 Rutas Dinámicas

Permiten que un componente reciba parámetros en la URL, lo que es útil para mostrar información específica, como detalles de un producto o perfil de usuario.

Ejemplo:

const routes: Routes = [ 
	{ path: 'producto/:id', component: ProductoComponent } 
];

🔹 Rutas Programadas (Programáticas)

Nos permiten cambiar de ruta desde el código de TypeScript sin necesidad de que el usuario haga clic en un enlace. Se usa el servicio Router para navegar de manera dinámica.

Ejemplo:

this.router.navigate(['/detalle-producto', id]);

Elementos claves para implementar rutas en Angular

Para implementar rutas en Angular, debemos conocer los siguientes conceptos y herramientas:

📌 RouterOutlet

Es una directiva que actúa como un contenedor donde se renderizan los componentes en función de la ruta activa. Se coloca en el app.component.html o en cualquier otro lugar donde queramos que aparezcan las vistas dinámicas.

<router-outlet></router-outlet>

📌 routerLink

Es una directiva de Angular que permite definir enlaces de navegación dentro de la aplicación sin recargar la página.

<a routerLink="/home">Ir a Inicio</a>

📌 ActivatedRoute

Es un servicio que nos permite acceder a los parámetros de la URL dentro de un componente.

constructor(private route: ActivatedRoute) { 
} 

ngOnInit() { 
	const id = this.route.snapshot.paramMap.get('id'); 
}

📌 Router

Es un servicio que nos permite cambiar de ruta de forma programática. Simplemente, lo importamos en nuestro componente y hacemos uso del mismo.

this.router.navigate(['/dashboard']);

Ahora tomemos hagamos la implementación en una aplicación real.

Configuración Inicial

Primero, creamos un nuevo proyecto de Angular si no lo tenemos:

ng new mi-proyecto-angular
cd mi-proyecto-angular
ng serve

Luego, creamos los siguientes componentes para las diferentes vistas, nos aprovechamos del cliente Angular para realizar esta tarea, en nuestro caso vamos a crear un componente para una ruta estática y otro para una ruta dinámica:

ng generate component components/quienes-somos 
ng generate component components/detalle-mascota

Configuración del Módulo de Rutas (app-routing.ts)

Definimos las rutas de la aplicación en el archivo app-routing.module.ts:

import { Routes } from '@angular/router';
import { QuienesSomosComponent } from './components/quienes-somos/quienes-somos.component';
import { MascotasListComponent } from './components/mascotas-list/mascotas-list.component';
import { DetalleMascotaComponent } from './components/detalle-mascota/detalle-mascota.component';
import { FormularioComponent } from './components/formulario/formulario.component';

export const routes: Routes = [
    { path: '', component: MascotasListComponent },
    { path: 'mascota/:id', component: DetalleMascotaComponent },
    { path: 'quienes-somos', component: QuienesSomosComponent },
    { path: 'adopcion/:id', component: FormularioComponent }
];

Uso de routerLink en la Barra de Navegación

En navbar.component.html, agregamos enlaces de navegación con routerLink:

<nav>  
	<a routerLink="/">Inicio</a>  
    <a routerLink="/quienes-somos">Quiénes Somos</a>
</nav>

Mostrar Componentes con RouterOutlet

En app.component.html, añadimos el RouterOutlet para mostrar las vistas dinámicamente:

<app-navbar></app-navbar>
<router-outlet></router-outlet>
<app-footer></app-footer>

Implementar una Ruta Dinámica

En detalle-mascota.component.ts, obtenemos el ID de la mascota desde la URL usando ActivatedRoute:

export class DetalleMascotaComponent implements OnInit {
  mascota?: Mascota;
  loading: boolean = true;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private mascotaService: MascotaService
  ) { }

  ngOnInit(): void {
    const id = this.route.snapshot.paramMap.get('id');

    if (id) {
      this.mascotaService.
        getMascotaById(Number(id)).
        subscribe({
          next: (mascota) => {
            this.mascota = mascota;
            this.loading = false;
          }
        })
    }
  }

Y en mascota.component.html, enlazamos a la ruta dinámica usando routerLink:

<a [routerLink]="['/mascota', mascota.id]">
	Ver detalles de {{ mascota.nombre }}
</a>

Navegación Programática con Router

Para cambiar de ruta desde TypeScript, usamos el servicio Router. Por ejemplo, si queremos redirigir al usuario a un formulario de adopción:

import { Router } from '@angular/router'; 

export class DetalleMascotaComponent { 
	constructor(private router: Router) {
    } 
    
    irAFormulario() { 
    	this.router.navigate(['/adopcion', this.id]); 
    } 
}

Y en detalle-mascota.component.html:

<button (click)="irAFormulario()">Adoptar</button>

Siguiendo este paso a paso, podrás implementar los tipos de rutas que Angular nos permite construir y con ello lograrás mejorar la usabilidad de tus aplicaciones.

Si te gustó el contenido, compártelo en tus redes.

Para cualquier duda me puedes contactar por:

• LinkedIn
• Mi canal de YouTube

Un servicio es una clase diseñada para encapsular lógica o funcionalidad que debe ser compartida entre diferentes partes de la aplicación. Se utiliza principalmente para:

1. Separar lógica de negocio del componente.
2. Compartir datos y métodos entre componentes.
3. Facilitar pruebas unitarias al desacoplar funcionalidades.
4. Gestionar recursos externos como APIs o almacenamiento local.

Angular proporciona el mecanismo de inyección de dependencias (DI) para gestionar servicios, lo que garantiza que siempre se trabaje con una única instancia compartida (Patrón Singleton) a menos que se configure de otra manera.

Cómo se implementa un servicio

Crear e implementar un servicio es sencillo gracias al Cliente Angular y al patrón de inyección de dependencias. Veamos los pasos necesarios para realizar esta implementación.

1. Crear un servicio

Utiliza el comando de Angular CLI para generar un servicio:

ng generate service nombre-del-servicio

Este comando genera dos archivos:

• nombre-del-servicio.service.ts (código del servicio).
• nombre-del-servicio.service.spec.ts (archivo de pruebas).

El archivo generado podría verse así:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Proveedor en el nivel raíz
})
export class NombreDelServicio {
  constructor() { }
}

2. Proveer el servicio

Angular registra automáticamente el servicio en el nivel raíz mediante el decorador @Injectable({ providedIn: 'root' }). Esto significa que estará disponible en toda la aplicación como un Singleton.

Si necesitas limitar el alcance del servicio, puedes especificarlo manualmente en los providers de un módulo o componente.

En Angular, además del nivel raíz, podemos registrar el servicio a nivel de módulo o de componente.

Casos de uso de los servicios

1. Lógica de negocio compartida

Por ejemplo, nuestra aplicación de adopción de mascotas puede necesitar filtrar o procesar datos sobre mascotas disponibles:

export class MascotaService {
  filtrarPorEdad(mascotas: Mascota[], edad: number): Mascota[] {
    return mascotas.filter(m => m.edad === edad);
  }
}

2. Gestión de estados o datos globales

Los servicios permiten compartir datos entre componentes sin necesidad de usar un patrón de emisión de eventos.

export class SesionService {
  private usuarioLogeado: Usuario | null = null;

  setUsuario(usuario: Usuario): void {
    this.usuarioLogeado = usuario;
  }

  getUsuario(): Usuario | null {
    return this.usuarioLogeado;
  }
}

Para gestión de estados simples, usar servicios es posible y puede ser una solución aplicable.

3. Consumo de APIs

Este es uno de los casos más comunes. Un servicio interactúa con un backend para enviar o recibir datos.

Vamos a entrar en detalle para este caso de aplicación.

Uso de servicios con consumos de APIs

Para consumir APIs en Angular, utilizamos el módulo HttpClientModule y las herramientas de RxJS. A continuación, veamos cómo integrarlos.

1. Configuración inicial

Primero, asegúrate de importar el módulo HttpClientModule en el archivo principal del módulo de tu aplicación (app.module.ts):

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule // Importar aquí
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Crear el servicio para la API

Supongamos que estamos construyendo una aplicación de adopción de mascotas y queremos consumir una API que proporciona una lista de mascotas. El servicio podría verse así:

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

export interface Mascota {
  id: number;
  nombre: string;
  edad: number;
  tipo: string;
}

@Injectable({
  providedIn: 'root' // Disponible en toda la aplicación
})
export class MascotaService {
  private apiUrl = 'http:/localhost:5000/mascotas';

  constructor(private http: HttpClient) {}

  // Obtener la lista de mascotas
  getMascotas(): Observable<Mascota[]> {
    return this.http.get<Mascota[]>(this.apiUrl).pipe(
      map(data => data), // Transforma los datos si es necesario
      catchError(this.handleError) // Manejo de errores
    );
  }

  // Manejo de errores
  private handleError(error: HttpErrorResponse) {
    let mensaje = 'Ocurrió un error inesperado.';
    if (error.error instanceof ErrorEvent) {
      // Error del cliente
      mensaje = `Error del cliente: ${error.error.message}`;
    } else {
      // Error del servidor
      mensaje = `Error del servidor: ${error.status}, mensaje: ${error.message}`;
    }
    return throwError(() => mensaje);
  }
}

3. Consumir el servicio en un componente

Ahora que tenemos el servicio, podemos utilizarlo en un componente para mostrar la lista de mascotas.

import { Component, OnInit } from '@angular/core';
import { MascotaService, Mascota } from './mascota.service';

@Component({
  selector: 'app-lista-mascotas',
  template: `
    <div *ngIf="mascotas; else cargando">
      <ul>
        <li *ngFor="let mascota of mascotas">{{ mascota.nombre }} - {{ mascota.tipo }}</li>
      </ul>
    </div>
    <ng-template #cargando>
      <p>Cargando mascotas...</p>
    </ng-template>
  `
})
export class ListaMascotasComponent implements OnInit {
  mascotas: Mascota[] | null = null;

  constructor(private mascotaService: MascotaService) {}

  ngOnInit() {
    this.mascotaService.getMascotas().subscribe({
      next: (data) => (this.mascotas = data),
      error: (error) => console.error('Error al cargar mascotas:', error),
    });
  }
}

4. Ventajas de usar Observables

Al usar Observables en Angular:

• Puedes cancelar suscripciones automáticamente con operadores como takeUntil.
• Es posible combinar flujos de datos con operadores como combineLatest.
• Tienes más control sobre el manejo de errores y la transformación de datos.

Los servicios son una herramienta fundamental en Angular para estructurar aplicaciones bien organizadas y escalables. Al integrarlos con HttpClient y RxJS, puedes manejar flujos de datos asíncronos de manera eficiente, aprovechar los operadores para transformar datos y garantizar una mejor experiencia del usuario.

Practicar la implementación de servicios con APIs reales es una excelente manera de dominar este concepto y sacarle el máximo provecho a Angular.

Te dejo un video donde de forma práctica verificamos los conceptos que hemos revisado anteriormente.

¡Una nueva y emocionante característica llega a Angular! Las señales, estas proveen una nueva forma de comunicación de nuestro código que comunique a nuestras plantillas que los datos han cambiado. Esto mejora la capacidad de detección de cambios de Angular, lo que también mejora el rendimiento y hace nuestro código más reactivo.

Ya puedes probar las señales, están disponibles con acceso anticipado para desarrolladores (developer preview) en Angular v16, que se publicará en mayo de 2023. Te muestro como hacerlo más adelante.

Si gustas puedes ver el vídeo asociado (en inglés):

Encuentra el código de este tutorial aquí: https://stackblitz.com/edit/angular-signals-deborahk.

Antes de adentrarnos en detalles del "qué" y el "cómo", vamos a empezar con el "por qué". Entonces, ¿por qué usar las señales?

¿Por qué necesitamos las señales?

Empecemos con un ejemplo simple que no utiliza señales. Digamos que estás escribiendo código para realizar algunas operaciones matemáticas.

let x = 5;
let y = 3;
let z = x + y;
console.log(z);//~8

¿Qué es lo que este código imprime por consola? Así es, imprime 8.

En alguna parte más adelante en el código cambiamos el valor de x. ¿Qué valor de z se imprime por consola ahora?

let x = 5;
let y = 3;
let z = x + y;
console.log(z);

x = 10;
console.log(z);//~8

¡Aún imprime 8! Esto se debe a que el valor se asigna a z desde el inicio cuando la expresión se ha evaluado. La variable z no reacciona a los cambios en x o en y.

¡Pero queremos que nuestras variables reaccionen a los cambios!

Una de las razones por las que usamos Angular es para crear sitios web interactivos y reactivos, es decir, con capacidad de reaccionar a los cambios de los datos.

Como por ejemplo en la Figura 1. Cuando el usuario edita la cantidad, las variables relacionadas, como el total, sub-total e impuestos, deberían reaccionar y ajustar los costos automáticamente. Si el usuario decide borrar un item del carrito también queremos que las variables relacionadas sean capaces de re-calcular los costos.

Con las señales nuestro código puede ser más reactivo. En nuestro anterior ejemplo la implementación de señales se vería así:

const x = signal(5);
const y = signal(3);
const z = computed(() => x() + y());
console.log(z()); // 8

x.set(10);
console.log(z()); // 13

Veremos la sintaxis y lo demostraremos a detalle más adelante. Por ahora, el código de arriba define dos señales: x y y además de darles valores iniciales de 5 y 3. Entonces definimos una señal computada z, que es la suma de x y y. Debido a que las señales proveen notificaciones de cambios cuando cambian los valores de las señales x o y, cualquier valor computado a partir de esas señales se re-calculará automáticamente. ¡Este código es reactivo! ¡Excelente!

Las señales computadas reaccionan y se re-calculan cuando cualquiera de sus señales dependientes cambia. Si una señal está vinculada en una plantilla de Angular, al cambiar dicha señal, el mecanismo de detección de cambios de Angular actualiza cualquier vista que pueda leer la señal. Y los usuarios visualizan los valores modificados.

Por lo que es posible dar respuesta a la pregunta de, ¿por qué necesitamos las señales? De la siguiente manera:

• Las señales permiten la reactividad.
• Usando señales podemos tener mayor control en la detección de cambios, lo cual puede mejorar el desempeño.

Profundicemos un poco más para entender lo que es una señal y cómo se usa.

¿Qué es una señal?

Podemos pensar de una señal como un valor que además tiene la capacidad de notificar cambios. Una señal es un tipo especial de variable que almacena un valor. Pero a diferencia de otras variables, una señal también provee notificaciones cuando el valor de la variable cambia.

Imagínate una variable normal como si fuera un estante o repisa, como en el lado izquierdo de la figura 2. Cuando un valor se asigna a la variable, ésta se colocaría en el estante. Cualquier código dentro del alcance puede simplemente ver (leer) la variable en el estante.

Una señal tiene mayor parecido a una caja, como se muestra al lado derecho de la figura 2. Al crear una señal, creamos algo análogo a una caja y el valor se coloca dentro de ésta. Cuando el valor que se encuentra dentro cambia, la caja emite un brillo para avisarle. Para leer la señal, es decir el valor almacenado, primero debemos abrir "la caja" usando paréntesis: x(). Técnicamente llamamos a la función "getter" (literal de conseguidor, método o función que devuelve un valor) de la señal para leer el valor de esta.

Ahora pues, ya sabemos que es una señal.

• Una señal es una variable con notificaciones de cambios.
• Es un valor reactivo o bien un "reactivo primitivo".
• Siempre tiene un valor
• Es síncrona.
• No es un sustituto o remplazo de RxJS ni de Observables para operaciones asíncronas como http.get.

¿Dónde podemos usarlas?

• En componentes para monitorear su estado local.
• En directivas.
• En servicios para compartir el estado entre componentes.
• Para su lectura en una plantilla (del inglés template) para mostrar lo valores.
• O en cualquier otra parte de tu código.

A continuación, vayamos paso a paso viendo cómo crear y usar señales.

Cómo crear una señal

Para usar una señal tenemos primero, por supuesto, que crearla.

cantidad = signal<number>(1);

Esta es la sintaxis para escribir el código para crear e inicializar una señal usando el método constructor signal().

De forma opcional como podemos ver, es posible pasar un parámetro genérico para definir el tipo de dato de la señal. Una señal puede ser de tipo string, number, array, object o cualquier tipo de dato. En muchos casos el tipo de dato puede inferirse y por lo tanto no es necesario u obligatorio pasar el parámetro de tipo genérico.

Pasemos al constructor el valor por defecto para nuestra señal, ya que una señal siempre debe tener un valor, y por lo tanto, es necesario inicializarlas con un valor por defecto.

Aquí te muestro algunos otros ejemplos:

cantidad = signal(1);

cantidadDisponible = signal([1, 2, 3, 4, 5, 6]);

vehiculoSeleccionado = signal<Vehiculo>({ 
  id: 1,
  nombre: 'AT-AT', 
  precio: 19416.13
});

vehiculos = signal<Vehiculo[]>([]);

La primera línea de este código crea una señal numérica con un valor por defecto (predefinido) de 1. Ya que el valor predeterminado es de tipo number, la cantidad es una señal que contiene un número. El parámetro del tipo genérico no se necesita pasar, ya que como vimos el tipo del dato es inferido automáticamente.

La segunda línea es una señal que contiene un arreglo de números, donde su valor predefinido corresponde con los valores del 1 al 6. De nuevo, no necesitamos pasar el parámetro de tipo genérico ya que el tipo de dato se infiere automáticamente a partir del tipo de dato del valor que hemos pasado.

La señal vehiculoSeleccionado contiene un objeto de tipo Vehiculo. En este ejemplo el tipo no puede inferirse, por lo que especificamos un parámetro de tipo genérico para Vehiculo.

La señal vehiculos contiene un arreglo para objetos de tipo Vehiculo, que está vacío por defecto. Para que este arreglo posea tipos estático y pueda recibir elementos del tipo de dato Vehiculo, agregamos el parámetro genérico de tipo de datos <Vehiculo[]>.  

Una señal que fue creada utilizando el constructor es editable, por lo que puedes asignarle un valor nuevo o diferente, actualizarla en base a su valor actual o mutar su contenido. En breve veremos ejemplos de cómo realizar estas operaciones.

Una vez que hayas creado una señal es posible que quieras leer su valor.

Cómo leer una señal

Anteriormente planteamos pensar que una señal es una caja. Hablando metafóricamente podemos decir que para leer el valor de una señal es necesario primero abrir la caja. Ya que las señales son funciones, esto lo hacemos invocando la señal con el uso de paréntesis.

quantity();

Empecemos con el nombre de la señal y enseguida con el paréntesis de apertura y luego el de cierre. Técnicamente esto a su vez invoca a la función "getter", la cual es creada "por debajo", por lo que no es visible en el código.

Cuando se trabaja con Angular es común leer las señales en el "template" (plantilla).

<select
    [ngModel]="cantidad()"
    (change)="alSeleccionarCantidad($any($event.target).value)">
  <option *ngFor="let c of cantidadDisponible()">{{ c }}</option>
</select>

<div>Vehículo: {{ vehiculoSeleccionado().nombre }}</div>
<div>Price: {{ vehiculoSeleccionado().precio }}</div>
<div [style.color]="color()">Total: {{ precioTotal() }}</div>

La plantilla de arriba muestra una caja de selección de cantidad. La directiva [ngModel] lee el valor de la señal cantidad y crea un enlace o "binding" a ese valor.

El enlace o "binding" al evento change invoca el método alSeleccionarCantidad() del componente.

El elemento html option usa la directiva ngFor para iterar por cada elemento del arreglo en la señal cantidadDisponible. Lee la señal y crea una opción en el select para cada elemento del arreglo.

Debajo del elemento select encontrarás tres elementos div, el primero lee la señal vehiculoSeleccionado, luego accede a su propiedad nombre. El segundo elemento div lee la señal vehiculoSeleccionado y muestra su propiedad precio. El último div lee la señal precioTotal (que no hemos definido aún), y utiliza el valor de la señal color (que tampoco hemos definido todavía) para determinar el color del texto.

Es importante nota que al leer una señal siempre obtendremos el valor actual, y el código no tiene conocimiento de ningún valor previo.

Cuando el usuario elige una cantidad diferente en el elemento select queremos cambiar el valor de la señal cantidad. De esa manera la señal cantidad se transforma en la "fuente de verdad" para la cantidad seleccionada por el usuario. Veamos cómo hacerlo a continuación.

Cómo cambiar el valor de una señal

El método set reemplaza el valor de una señal con un nuevo valor. Básicamente "abre la caja", quita el ítem actual y asigna un nuevo ítem que tomará el lugar del anterior.

this.cantidad.set(cant);

Una situación común es cambiar el valor de la señal en base a una acción del usuario. Por ejemplo:

• El usuario selecciona una nueva cantidad usando el elemento select.
• El evento ligado al elemento select invoca al método alSeleccionarCantidad() y pasa la cantidad seleccionada por el usuario.
• La acción del usuario se maneja en el componente usando la función o método definido para este propósito.
• El nuevo valor se asigna a la señal cantidad.

Este es un ejemplo de una función para el manejo de eventos (event handler):

alSeleccionarCantidad(cant: number) {
  this.cantidad.set(cant);
}

En el momento en que se haya asignado o re-asignado la señal, el código notifica a cualquier consumidor de la señal que esta ha cambiado. En este contexto, un consumidor es cualquier código que tenga interés en recibir notificaciones de cambios del valor de la señal.

¿Cómo es que el consumidor indica que tiene interés en ser notificado de los cambios de una señal en particular?

Si un código lee una señal, ese código será notificado cuando la señal cambie.

Si una plantilla lee una señal, será notificada cuando la señal cambie y la "vista" (view) sea programada para volver a renderizarse.

Por lo que el acto de leer una señal registra el interés del consumidor de observar el valor y los cambios de dicha señal. El equipo de Angular le llama a esto la regla de oro de las señales en componentes: "la detección de cambios en un componente se agendará cuando y sólo cuando la lectura de una señal en el plantilla notifique a Angular que su valor a cambiado".

Aquí un ejemplo para ilustrar el proceso. Digamos que hay algo de trabajo realizándose dentro del método (mostrado abajo) que busca ajustar la cantidad. Digamos que quizá el caso de uso podría ser algo como una promoción, que si por ejemplo el usuario elige una cantidad igual o mayor a 5 entonces se lleva uno gratis. El punto es que la señal cantidad podría cambiar en varias ocasiones durante la ejecución del método.

alSeleccionarCantidad(cant: number) {
  this.cantidad.set(qty);
  
  this.cantidad.set(5);
  this.cantidad.set(42);
}

La cantidad se muestra en la plantilla usando la vinculación de Angular (binding) como se muestra abajo. Ya que el vínculo "lee" la señal cantidad, la plantilla "registra" su interés en recibir notificaciones de cambios.

//Angular binding (vinculación en la plantilla)
{{ cantidad() }}

Cuando el usuario elige la cantidad el método alSeleccionarCantidad() se ejecuta. El código en este método primero asigna el valor seleccionado por el usuario a la señal cantidad. Luego cuando la nueva señal se asigna esta genera una notificación. En este punto, se agenda la ejecución del mecanismo de detección de cambios de Angular, pero no tiene la oportunidad de hacerlo sino hasta después de la ejecución del método alSeleccionarCantidad().  

Entonces, el método alSeleccionarCantidad() continúa asignando el número 5 a la señal, que genera otra notificación de cambio. De nuevo el mecanismo de detección de cambios de Angular es llamado a ejecutarse pero aún debe esperar a que el método alSeleccionarCantidad() termine su ejecución. El método entonces asigna el valor 42 a la señal y el proceso se repite.

Cuando se completa la ejecución del método alSeleccionarCantidad() finalmente será turno de ejecución del mecanismo de detección de cambios de Angular. La plantilla lee la señal y obtiene su valor, que es 42. La plantilla no es "consciente" de ninguno de los valores anteriores. La vista se vuelve a "renderizar" y el nuevo valor de la señal cantidad se mostrará.

Si la señal cambia, cualquier "consumidor" interesado en su lectura será notificado. Pero el consumidor no recibirá el nuevo valor, sino que, hasta la próxima vez, cuando sea el turno de ejecución del consumidor es entonces que podrá "leer" el valor actual de la señal.

Si conoces cómo funcionan los observables en RxJS podrás notar que las señales pueden ser distintas ya que no emiten valores cómo lo hacen los observables, además de que no requieren una suscripción.

Además del método set(), también hay otras 2 maneras de cambiar una señal: update() y mutate(). El método set() reemplaza el valor de una señal con un valor nuevo, metafóricamente remplazado el contenido del "cajón" de la señal. Pásale el nuevo valor al método set().

// Remplaza el valor
this.cantidad.set(cant);

El método update() actualiza la señal en base a su valor actual. Pasa una función de "flecha" al método update(), esta provee el valor actual de la señal para que sea posible cambiarlo programáticamente según sea necesario. En el siguiente código la cantidad se duplica.

// Actualizar el valor de la señal en base al valor actual
this.cantidad.update(cant => cant * 2);

El método mutate() modifica el contenido del valor de una señal, no el valor de la señal en sí. Úsalo con arreglos para modificar sus elementos y con objetos para modificar sus propiedades. En la siguiente línea de código se incrementa 20% el precio de un vehículo.

this.vehiculoSeleccionado.mutate(v => v.precio = v.precio + (v.precio * .20));

Independientemente de la forma en cómo se modifica la señal, los consumidores serán notificados que ha sucedido un cambio, ellos pueden entonces leer el nuevo valor de la señal cuando es su turno de ejecución.

Cómo definir una señal computada

Frecuentemente tenemos variables en nuestro código que dependen de otras variables, por ejemplo, el precio total de un ítem es su precio unitario por el número o cantidad de ítems deseados de este tipo. Si el usuario cambia la cantidad queremos también cambiar el precio total, para lo que utilizamos señales computadas (computed signals).

Define una señal computada llamando la función computed() de creación de señales computadas, esta crea una nueva señal que depende de otras. Ahora pasemos a la función computed() una función que lleve a cabo las operaciones deseadas, esta tendrá acceso a la lectura de el valor de una o más señales para llevar a cabo su computo.

precioTotal = computed(() => this.vehiculoSeleccionado().precio * this.cantidad());

color = computed(() => this.precioTotal() > 50000 ? 'verde' : 'azul');

La primera línea de código de arriba define una señal computada precioTotal al llamar la función de creación computed(), la función que pasamos a esta función lee las señales vehiculoSeleccionado y cantidad, si cualquiera de estas cambia, la señal computada será notificada y leerá el nuevo valor la próxima vez que se ejecute.

La segunda línea define la señal computada color, que le asigna el valor verdeo azul dependiendo del valor de la señal precioTotal. La plantilla puede vincular a esta señal para mostrar el estilo apropiado.

Una señal computada es sólo lectura y no puede ser modificada con los métodos set(), update() ni mutate(), además su valor se re-evalúa o re-computa cuando:

• Uno o más de sus señales dependientes ha cambiado.
• Y el valor de la señal computada ha sido leído.

La señal computada se "memoiza", lo que quiere decir que guarda el resultado evaluado, este es re-utilizado la próxima vez que es leído.

Digamos por ejemplo que tenemos lo siguiente en nuestra plantilla:

Precio extendido: {{ precioTotal() }}
Precio total: {{ precioTotal() }}
Cantidad a pagar: {{ precioTotal() }}

La primera vez que la plantilla lea la señal computada precioTotal, el valor se calcula y se guarda en memoria, las siguientes 2 veces que se lee, se re-utiliza el valor almacenado anteriormente. Dicho valor no se re-calcula a menos que alguna de sus señales dependientes haya cambiado.

Cómo usar un efecto

Podría haber momentos en que necesites ejecutar código en respuesta al cambio de alguna señal y que este código tenga efectos secundarios, por ello quiero decir que este código haga un llamado a alguna API o que realice alguna otra operación no relacionada a la señal, en estos casos debemos usar effect().

Por ejemplo, digamos que quieres inspeccionar tu código en busca de errores (debug) y para ello deseas imprimir el valor de la señal usando console.log cada vez que esta sufra un cambio, como sabemos llamar console.log es un efecto secundario.

Para definir un efecto debemos llamar la función creacional effect(). Pasémosle a esta función la operación a realizar, la cual será ejecutada nuevamente cada vez que el código reaccione a un cambio en cualquiera de la señales dependientes.

effect(() => console.log(this.vehiculoSeleccionado()));

La función effect() puede ser invocada desde otra función, pero frecuentemente es llamada desde el constructor u otro código de inicialización, dado que a su vez prepara un tipo de función manejadora (handler).

Alternativamente un efecto puede definirse de forma declarativa como se muestra a continuación:

e = effect(() => console.log(this.vehiculoSeleccionado()));

Un efecto no debería cambiar el valor de ninguna señal, sin embargo si necesitas cambiar una señal en base a un cambio a otra señal dependiente es recomendable que utilices una señal computada en su lugar.

Cómo verás, no es muy común utilizar los efectos, aunque son útiles para imprimir valores por consola o para llamar APIs externas, pero no los uses para trabajar con RxJS ni Observables; habrá funcionalidades de las señales que serán útiles para convertir a y desde los observables.

Cuándo usar señales

Algunas sugerencias.

En primer lugar, continúa utilizando "handlers" en tus componentes como has venido haciendo hasta ahora para manejar o responder a las acciones de los usuarios. Acciones como realizar una selección de una lista desplegable, hacer clic en un botón o ingresar datos en una "caja de texto".

Usa una señal o señal computada en un componente para cualquier estado que pueda cambiar. En este contexto, estado se refiere a cualquier dato que sea administrado por el componente. Cualquier cosas desde una bander estaCargandose hasta la página actualmente mostrada con los datos seleccionados por el usuario podrían ser señales. Las señales son especialmente útiles cuando se muestran los datos en la plantilla que deben reaccionar a cambios dependientes de otras acciones.

Las señales compartidas deberían ser servicios. Digamos que tenemos un arreglo con los vehículos devueltos que se comparte entre componentes, este podría ser un servicio.

Continúa usando los observables para operaciones asíncronas como las llamadas a http.get(), cabe mencionar que hay otras funcionalidades que vendrán con las señales para equiparar más fielmente con los observables.

Concluyendo

Las señales representan un avance mayúsculo en las capacidades de programación reactiva y detección de cambios de Angular. Este tutorial respondió a las preguntas: "¿Por qué?", "¿Qué?" y "¿Cómo?" así como "¿Dónde?" y "¿Cuándo?" también.

Las señales están disponibles en vista previa para desarrolladores en Angular v16, como parte de esta vista previa las señales se incluyen en el modelo de detección de cambios. Se espera que futuras capacidades de las señales mejorarán la detección de cambios y marcarán los componentes para revisión de una forma similar como se lleva a cabo actualmente al usar OnPush con la pipa asíncrona (async pipe).  

Una forma sencilla y fácil de probar las señales es usar Stackblitz que es un editor de código en línea que trabaja muy bien con Angular y no requiere instalaciones. Para usar Stackblitz con señales:

1. Navega al sitio de Stackblitz: www.stackblitz.com.
2. Haz clic en el icono de Angular para crear un proyecto Angular.
3. Edita el archivo package.json resultante y cambia las versiones de los paquetes de @angular a sus versiones más actuales "pre-realease" (Angular v16).
4. Guarda el proyecto para que se actualicen las dependencias.
5. Dale una probada a las señales.

Para ver estos pasos en acción dale un vistazo al final del siguiente vídeo (en inglés):

También puedes empezar usando el enlace a mi proyecto https://stackblitz.com/edit/angular-signals-deborahk. Asegúrate de crear una copia para que puedas realizar tus propios cambios.

¡Las señales llegaron! Van a mejorar la capacidad de detección de cambios y la reactividad de tu código, además de hacerlo de más fácil edición y lectura, además que son muy divertidas de usar.

La filosofía de Angular, es trabajar como una SPA (Single Page Application), de forma que la usabilidad y el performance sea lo mejor posible.

Preparando el ambiente

Instalar Node.js y npm

Angular se ejecuta sobre Node.js, que es un entorno de ejecución de JavaScript orientado a backend. Esto significa que para poder trabajar con Angular, primero necesitas tener Node.js instalado en tu computadora.

npm (Node Package Manager) es la herramienta que viene con Node.js y nos permite instalar paquetes y librerías necesarios para el desarrollo. A través de npm, también instalaremos Angular.

Instalación de Node.js:

Visita el sitio oficial de Node.js y descarga la versión recomendada (LTS - Long Term Support). Sigue las instrucciones para instalarlo en tu sistema operativo.

Una vez instalado, abre una terminal y verifica que Node.js y npm se hayan instalado correctamente ejecutando los siguientes comandos:

node -v
npm -v

Este comando muestra en la pantalla la versión instalada de Node.js y npm, con ello sabemos que tenemos lo necesario para iniciar el aprendizaje de Angular.

Conociendo a Angular CLI

Angular tiene una herramienta muy útil llamada Angular CLI (Command Line Interface). Esta herramienta permite crear y gestionar proyectos de Angular mediante comandos sencillos. Nos ayuda a generar la estructura del proyecto, añadir componentes, servicios, y mucho más.

Para instalar Angular CLI, ejecuta el siguiente comando en tu terminal:

npm install -g @angular/cli

Este comando descarga e instala Angular CLI de forma global en tu sistema, lo que significa que puedes usarlo desde cualquier carpeta en tu computadora.

Una vez completada la instalación, verifica que Angular CLI esté correctamente instalado ejecutando:

ng version

Esto mostrará la versión de Angular CLI y otras herramientas relacionadas.

En este enlace podrás encontrar la referencia completa de los comandos disponibles para ejecutar en Angular CLI: https://angular.dev/cli

Entiendo la estructura de la aplicación

Ahora que tienes Angular CLI instalado, ya estás listo para crear tu primer proyecto Angular. Vamos a hacerlo paso a paso.

1. Abre la terminal en la carpeta donde quieras crear el proyecto.
2. Ejecuta el siguiente comando para crear un nuevo proyecto Angular:

ng new nombre-del-proyecto

Angular CLI te hará algunas preguntas, como si deseas añadir un enrutador (router) y qué formato de estilos (CSS, SCSS, etc.) prefieres usar. Responde según tus preferencias.

Después de responder estas preguntas, Angular CLI generará toda la estructura del proyecto y descargará las dependencias necesarias.

Recuerda que el nombre del proyecto no debe llevar espacios en blanco, caracteres especiales o acentos.

Cuando Angular CLI crea un proyecto, organiza todo en carpetas y archivos. Algunos de los archivos clave incluyen:

• src/app: Aquí es donde se encuentra el código de tu aplicación. Contiene componentes, módulos y servicios.
• src/app/app.component.ts: Es el componente principal de la aplicación.
• src/app/app.module.ts: Define los módulos de la aplicación.
• angular.json: Archivo de configuración del proyecto Angular.

Ejecutar Tu Proyecto Angular

Una vez que el proyecto ha sido creado, es hora de ejecutarlo y ver tu primera aplicación Angular en acción. Angular CLI te permite correr un servidor de desarrollo para que puedas ver los cambios que haces en tiempo real.

Para iniciar el servidor, ejecuta el siguiente comando en la terminal desde la carpeta de tu proyecto:

ng serve

Angular comenzará a compilar el proyecto y luego te mostrará una URL que puedes abrir en tu navegador (por defecto es http://localhost:4200). Abre esa URL en tu navegador y deberías ver la página inicial de tu nueva aplicación Angular.

Cada vez que hagas un cambio en tu código, Angular recargará automáticamente la página para reflejar los cambios, lo que hace el desarrollo más eficiente y fluido.

Creando componentes

Sabiendo que Angular basa su funcionamiento en componentes, es natural que podamos crearlos de forma rápida y simple, usando a Angular CLI. Para ello ejecutamos el siguiente comando:

ng generate component nombre-componente

Con esto Angular CLI generará los siguientes archivos:

1. .ts (TypeScript): Contiene la lógica del componente. Define la clase que controla su comportamiento.
2. .html: Es la plantilla o vista, donde se define el contenido visual.
3. .css: Aquí se especifican los estilos específicos del componente.
4. .spec.ts: Es el archivo de pruebas unitarias, utilizado para verificar que el componente funcione como se espera.

Cada componente trabaja de manera modular, permitiendo reutilización y organización clara del código.

Ahora solo queda que practiques, para ello te dejó un video donde paso a paso damos estos primeros pasos e incluso iniciamos un proyecto, para poner la práctica los conceptos anteriormente revisados.

Si tienes alguna duda, me puedes mandar un mensaje a mi LinkedIn, con gusto te respondo.

Después de jugar con Angular durante mucho tiempo, finalmente se me ocurrió una explicación comprensible de las directivas de Angular. En este artículo, primero entenderemos qué es exactamente una directiva y cómo usarla en Angular. También crearemos nuestras propias directivas personalizadas. ¿Entonces que estamos esperando? Profundicemos en ello.

¿Qué es una directiva angular?

Las directivas son las funciones que se ejecutarán cada vez que el compilador Angular las encuentre. Las directivas angulares mejoran la capacidad de los elementos HTML al adjuntar comportamientos personalizados al DOM.

Las directivas angulares se clasifican en tres categorías.

1. Directivas de atributo
2. Directivas estructurales
3. Componentes

Directivas de Atributo

Las directivas de atributos son responsables de manipular la apariencia y el comportamiento de los elementos DOM. Podemos usar directivas de atributos para cambiar el estilo de los elementos DOM. Estas directivas también se usan para ocultar o mostrar condicionalmente elementos DOM particulares. Angular proporciona muchas directivas de atributos integradas como NgStyle, NgClass, etc. También podemos crear nuestras propias directivas de atributos personalizadas para la funcionalidad deseada.

Directivas Estructurales

Las Directivas Estructurales son las encargadas de cambiar la estructura del DOM. Funcionan agregando o eliminando elementos del DOM, a diferencia de las directivas de atributos, que solo cambian la apariencia y el comportamiento del elemento.

Puede diferenciar fácilmente entre la directiva estructural y la de atributos mirando la sintaxis. El nombre de la Directiva estructural siempre comienza con un prefijo de asterisco (*), mientras que la Directiva de atributos no contiene ningún prefijo. Las tres directivas estructurales integradas más populares que proporciona Angular son NgIf, NgFor y NgSwitch.

Componentes

Los componentes son directivas con plantillas. La única diferencia entre los Componentes y los otros dos tipos de directivas es la Plantilla. Las directivas estructurales y de atributos no tienen plantillas. Entonces, podemos decir que el Componente es una versión más limpia de la Directiva con una plantilla, que es más fácil de usar.

Usando directivas integradas de Angular

Hay muchas directivas integradas disponibles en Angular que puede usar fácilmente. En esta sección, usaremos dos directivas incorporadas muy simples.

La directiva NgStyle es una directiva de atributo que se utiliza para cambiar el estilo de cualquier elemento DOM en función de alguna condición.

<p [ngStyle]="{'background': isBlue ? 'blue' : 'red'}"> Soy una directiva de atributo</p>

En el fragmento de código anterior, estamos agregando un fondo azul si el valor de la variable isBlue es true. Si el valor de la variable isBlue es falso, entonces el fondo del elemento anterior será rojo.

La directiva NgIf es una directiva estructural que se utiliza para agregar elementos al DOM de acuerdo con alguna condición.

<p *ngIf="show">Soy una directiva estructural</p>

En el fragmento de código anterior, todo el párrafo permanecerá en el DOM si el valor de la variable show es true, de lo contrario, se iniciará desde el DOM.

Crear una directiva de atributos personalizada

Crear una directiva personalizada es como crear un componente Angular. Para crear una directiva personalizada, debemos reemplazar el decorador @Component con el decorador @Directive.

Entonces, comencemos con la creación de nuestra primera directiva de atributos personalizados. En esta directiva, vamos a resaltar el elemento DOM seleccionado configurando el color de fondo de un elemento.

Crea un fichero app-highlight.directive.ts en la carpeta src/app y añade el siguiente fragmento de código.

import { Directive, ElementRef } from '@angular/core';

@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    constructor(private eleRef: ElementRef) {

        eleRef.nativeElement.style.background = 'red';

    }

}

Aquí, estamos importando Directive y ElementRef desde "@angular/core". La directiva proporciona la funcionalidad del decorador @Directive en el que proporcionamos su selector de propiedades a appHighLight para que podamos usar este selector en cualquier lugar de la aplicación. También estamos importando ElementRef que es responsable de acceder al elemento DOM.

Ahora, para que funcione la directiva appHighlight, debemos agregar nuestra directiva al arreglo de declaraciones en el archivo app.module.ts.

import ...;

import { ChangeThemeDirective } from './app-highlight.directive';

@NgModule({

declarations: [

AppComponent,

ChangeThemeDirective

],

imports: [

...

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Ahora vamos a usar nuestra directiva personalizada recién creada. Estoy agregando la directiva appHightlight en app.component.html pero puede usarla en cualquier parte de la aplicación.

<h1 appHightlight>Highlight Me !</h1>

El resultado del fragmento de código anterior se verá así.

Creación de una directiva estructural personalizada

En la sección anterior, creamos nuestra primera directiva de atributos. El mismo enfoque se utiliza para crear la directiva estructural.

Entonces, comencemos con la creación de nuestra directiva estructural. En esta directiva, vamos a implementar la directiva *appNot que funcionará justo al contrario de *ngIf.

Crea un fichero app-not.directive.ts en la carpeta src/app y añade el siguiente código.

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({

    selector: '[appNot]'

})

export class AppNotDirective {

constructor(

    private templateRef: TemplateRef<any>,

    private viewContainer: ViewContainerRef) { }

    @Input() set appNot(condition: boolean) {

        if (!condition) {

            this.viewContainer.createEmbeddedView(this.templateRef);

        } else {

            this.viewContainer.clear();        }

    }

}

En el fragmento de código anterior, estamos importando Directive, Input, TemplateRef y ViewContainerRef desde @angular/core.

Directive proporciona la misma funcionalidad para el decorador @Directive. El decorador Input se utiliza para la comunicación entre los dos componentes. Envía datos de un componente a otro mediante el enlace de propiedades.

TemplateRef representa la plantilla incorporada que se utiliza para instanciar las vistas incorporadas. Estas vistas incorporadas están vinculadas a la plantilla que se va a renderizar.

ViewContainerRef es un contenedor donde se pueden adjuntar una o más vistas. Nosotros podemos usar la función createEmbeddedView() para adjuntar la plantilla incorporada al contenedor.

Ahora, para hacer que la directiva appNot funcione, necesitamos agregar nuestra directiva al arreglo de declaraciones en el app.module.ts.

import ...;

import { AppNotDirective } from './app-not.directive';

@NgModule({

declarations: [

AppComponent,

AppNotDirective

],

imports: [

...

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Ahora es el momento de usar nuestra directiva estructural recién creada.

Estoy agregando la directiva appNot en app.component.html pero puede usarla en cualquier parte de la aplicación.

<h1 *appNot="true">True</h1><h1 *appNot="false">False</h1>

La directiva *appNot está diseñada de tal manera que agrega el elemento de plantilla en el DOM si el valor de *appNot es false , justamente lo contrario de la directiva *ngIf.

El resultado del fragmento de código anterior se verá así.

Espero que este artículo haya respondido a la mayoría de sus preguntas sobre las directivas de Angular. Si tiene alguna consulta o duda, no dude en comunicarse conmigo en el cuadro de comentarios.

He recopilado las preguntas sobre Angular más comunes en StackOverflow, con sus respuestas.  Estas preguntas fueron elegidas en base a su puntuación. Ya seas un experto o un principiante, puedes aprender de las experiencias de otros.

Tabla de contenidos

• Angular — Promise vs Observable
• Diferencia entre Constructor y ngOnInit
• Error: "Can’t bind to 'ngModel' since it isn’t a known property of 'input'", No se puede vincular a 'ngModel' porque  no es una propiedad conocida de 'input'.
• Vinculacion de HTML en Angular
• Angular/RxJs -  ¿Cuando debo dejar de suscribir de 'Subscription'?
• ¿Cómo puedo seleccionar un elemento en una plantilla componente?
• ¿Cuales son los equivalentes de ngShow y ngHide en Angular?
• Como empaquetar una aplicación de Angular para producción
• BehaviorSubject vs Observable
• @Directive vs @Component en Angular
• Error de Angular HTTP GET with TypeScript :  http.get(…).map is not a function in [null] (http.get(...).map no es una función en [null])
• ¿Cómo se puede usar jQuery con Angular?
• Excepción en Angular: No provider for Http (No hay proveedor de HTTP)
• Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’ (No se puede enlazar a 'formGroup' porque no es una propiedad conocida de 'form'
• Error DI de Angular— EXCEPTION: Can’t resolve all parameters (Excepción: No se pueden resolver todos los parámetros)
• Angular — Establecer los headers (encabezamientos) para cada request (solicitud)
• ¿Cómo se puede usar *ngIf else en Angular?
• Error: Angular no provider for NameService (No hay proveedor para NombreServicio)
• Vinculando el elemento seleccionado a un object en Angular
• ¿Cuál es la diferencia entre declaraciones, proveedores e importación (import) en NgModule?
• En Angular, ¿Cómo se determina la ruta activa?
• Opciones CLI SASS de Angular
• Activar la detección de cambios en Angular  manualmente
• Angular y Typescript: No se pueden encontrar los nombres.
• Angular — ¿Cuál es el significado de module.id en el componente?
• ¿Cómo se puede obtener una nueva selección en "select" en Angular 2?
• Excepción de Angular: Can’t bind to ‘ngForIn’ since it isn’t a known native property (No se puede vincular a 'ngForIn' porque no es una propiedad nativa conocida.
• *ngIf y *ngFor en el mismo elemento causa un error
• ¿Cuál es el equivalente del $watch de AngularJS en Angular?
• Importando lodash en angular2 + aplicaciones typescript
• ¿Cómo se detecta un cambio de ruta en Angular?
• Global Events en Angular (eventos globales)
• ¿Cuales son algunas diferencias entre SystemJS y Webpack?
• Angular: Can’t find Promise, Map, Set and Iterator (No se puede encontrar Promise, Map, Set y Iterator)
• Angular RC4 — Angular ^2.0.0 con Typescript 2.0.0
• ¿Cómo se detecta cuando cambia un valor de @Input() en Angular?
• ¿Cómo se pasan argumentos url (query string) a una solicitud (request) de HTTP en Angular?
• ¿Cómo se despliegan las aplicaciones de Angular?
• ngFor con index como un atributo con un valor
• Define constantes globales en Angular 2
• Angular — Usar pipes en servicios y componentes
• Excepción en Angular2: Can’t bind to ‘routerLink’ since it isn’t a known native property (No se puede enlazar con 'routerLink' porque no es una propiedad  nativa conocida.
• Angular 2 pestañas dinámicas con componentes seleccionados por el usuario por click.
• Delegación: EventEmitter o Observable en Angular
• ¿Cómo se añade bootstrap a un proyecto angular-cli?
• Acceso a key y value de un objecto que utiliza *ngFor
• Excepción de Angular: Can’t bind to ‘ngFor’ since it isn’t a known native property (No se puede enlazar a 'ngFor' porque no es una propiedad nativa conocida).
• ¿Cómo se añade font-awesome a un proyecto Angular 2 + CLI
• Diferencia entre HTTP y HTTPClient en angular 4

¡Disfruta!

Angular - Promise vs Observable

551+ votos? 150,497+ vistas
Rohit pregunta,

¿Alguien puede explicar la diferencia entre Promise y Observable en Angular?

Un ejemplo de cada uno sería útil para comprender los dos. ¿En qué escenario podemos utilizar cada caso?

Günter Zöchbauer contesta, (686+ votos)

Promise

Una Promise se encarga de un solo evento cuando una operación asincrona (async) completa sea con éxito o error.

Nota: Hay librerias de promesas ( Promise ) que permiten la cancelación, pero ES6 Promise no lo permite.

Observable

Un Observable es como un Stream (en muchos lenguages) y permite pasar cero o más eventos donde se llama a los suscriptores para cada evento.

A menudo se prefiere un Observable a una  Promise porque proporciona las características de Promise y más. Con un Observable no importa si se desea trabajar con 0, 1 o múltiples eventos. Se puede utilizar la misma API en cada caso.

Un Observable también tiene la ventaja sobre una Promise de que es cancelable. Si ya no se necesita el resultado de una solicitud HTTP a un servidor o alguna otra operación asincrónica costosa, la Subscription de un Observable permite cancelar la suscripción, mientras que una Promise llamará a la devolución de llamada  (callback), exitosa o fallida, incluso si ya no se necesita.

Observable proporciona operadores como map, forEach, reduce, ... similares a los de un arreglo.

También hay operadores poderosos como retry(), o replay(), ... que suelen ser bastante útiles.

Source
Top

Diferencia entre Constructor y ngOnInit

444+ votos? 190,166+ vistas
Haseena P A pregunta,

Angular proporciona el gancho de ciclo de vida (lifecycle hook) ngOnInit por defecto.

¿Por qué usar ngOnInit , si ya tenemos constructor constructor?

Pardeep Jain contesta, (512+ votos)

El Constructor es un método predeterminado de la clase que se ejecuta cuando se crea una instancia de la clase y garantiza la inicialización adecuada de los campos en la clase y sus subclases.  Angular, o mejor dicho, Dependency Injector (DI o Inyector de dependencia) analiza los parámetros del constructor y cuando crea una nueva instancia al llamar a new MiClase() intenta encontrar proveedores que coincidan con los tipos de parámetros del constructor, los resuelve y los pasa al constructor como

new MiClase(argumentos);

ngOnInit es un enlace de ciclo de vida que Angular2 llama para indicar que Angular ha terminado de crear el componente.

Hay que importar OnInit para usarlo (realmente implementar OnInit no es obligatorio, pero se considera una buena práctica):

import {Component, OnInit} from '@angular/core';

Luego para usar el método de OnInit tenemos que implementarlo en la clase así.

export class App implements OnInit{
  constructor(){
     //se llama la primera vez, antes de ngOnInit()
  }
  
  ngOnInit(){
     //se llama despues del constructor y despues de la primera llamada a ngOnChanges() 
  }
}

Implementa esta interfaz para ejecutar lógica de inicialización después de que las propiedades enlazadas a datos de tu directiva (directive) hayan sido inicializadas. ngOnInit es llamado justo después de que las propiedades enlazadas a datos de la directiva  hayan sido revisadas por primera vez, y antes de que sus hijos sean revisados. Solamente es invocado una vez cuando la directiva es instanciada.

La mayor parte del tiempo se usa ngOnInit para las declaraciones e inicializaciones y así evitar trabajar en el constructor. El constructor solamente debe usarse para inicializar miembros de la clase, pero no para hacer un "trabajo" real.

Por lo tanto, deberías usar constructor() para establecer Dependency Injection (inyección de dependencia) y poco más. Es mejor empezar con el código de ejecución en ngOnInit()  - es donde/cuando se han resuelto los enlaces de los componentes.

Source
Top

Error: "Can’t bind to 'ngModel' since it isn’t a known property of 'input'"; No se puede vincular a 'ngModel' ya que no es una propiedad conocida de 'input'

442+ votos? 246,901+ vistas
abreneliere pregunta,

Tengo el siguiente error al iniciar mi aplicación de Angular, incluso si el componente no se muestra.

Tengo que comentarlo para que mi aplicación funcione.

zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
    <div>
        <label>Creado:</label>
        <input  type="text" [ERROR ->][(ngModel)]="test" placeholder="foo" />
    </div>
</div>"): InterventionDetails@4:28 ; Zone: <root> ; Task: Promise.then ; Value:

Aquí esta el fichero:

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Intervention } from '../../model/intervention';

@Component({
    selector: 'intervention-details',
    templateUrl: 'app/intervention/details/intervention.details.html',
    styleUrls: ['app/intervention/details/intervention.details.css']
})

export class InterventionDetails
{
    @Input() intervention: Intervention;
    public test : string = "toto";
}

abreneliere contesta, (674+ votos)

En app.module.ts, he añadido :

import { FormsModule } from '@angular/forms';

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

Source
Top

Vinculación de HTML en Angular

385+ votos? 227,115+ vistas
Aviad P. pregunta,

Estoy escribiendo una aplicación en Angular, y tengo una respuesta HTML que quiero mostrar. ¿Cómo lo hago? Si uso {{myVal}} codifica todos los caracteres HTML .

Necesito de alguna manera vincular el html interno de un div al valor de la variable.

prolink007 contesta, (691+ votos)

La sintaxis correcta es:

<div [innerHTML]="theHtmlString"></div>

Funciona en 5.2.6

Source
Top

Angular/RxJs - ¿Cuándo debo dejar de suscribir de 'Subscription'?

320+ votos? 69,606+ vistas
Sergey Tihon pregunta,

¿Cuándo debo guardar las instancias de Subscription e invocar unsubscribe() durante el ciclo de vida de NgOnDestroy y cuándo puedo sencillamente ignorarlas?

Guardar todas las suscripciones introduce mucho desorden en el código del componente.

La guía de Angular para cliente de HTTP lo indica de esta manera:

getHeroes() {
  this.heroService.getHeroes()
                   .subscribe(
                     heroes => this.heroes = heroes,
                     error =>  this.errorMessage = <any>error);
}

Pero la de Angular de navegación dice:

Eventualmente, navegaremos a otro sitio. El enrutador eliminará este componente del DOM y lo destruirá. Necesitamos hacer limpieza antes de que esto suceda. En concreto, debemos eliminar la suscripción (unsubscribe) antes de que Angular destruya el componente. No hacerlo puede provocar una pérdida de memoria.

Dejamos la suscripción de nuestro Observable en ngOnDestroy.

private sub: any;

ngOnInit() {
  this.sub = this.route.params.subscribe(params => {
     let id = +params['id']; // (+) convierte la cadena 'id' a un numero
     this.service.getHero(id).then(hero => this.hero = hero);
   });
}

ngOnDestroy() {
  this.sub.unsubscribe();
}

seangwright contesta, (508+ votos)

— — Editado 3 — La solución ‘oficial’ (2017/04/09)

Hablé con Ward Bell sobre esta pregunta en NGConf (incluso le mostré esta respuesta que dijo que era correcta) pero me dijo que el equipo de docs para Angular tenía una solución a esta pregunta que aún no está publicada (aunque están trabajando para que se apruebe). También me dijo que podía actualizar mi respuesta en SO con la siguiente recomendación oficial.

La solución que todos deberíamos usar en el futuro es agregar un campo private ngUnsubscribe: Subject = new Subject(); a todos los componentes que tienen llamadas  .subscribe() a Observables dentro del código de la clase.

Luego llamamos this.ngUnsubscribe.next(); this.ngUnsubscribe.complete(); en nuestro ngOnDestroy() .

La salsa secreta es (como ya indica @metamaker) llamar a .takeUntil(this.ngUnsubscribe) antes de nuestra llamada a  .subscribe() lo que garantiza que las suscripciones se eliminen antes de que se destruya el componente.

Ejemplo:

import { Component, OnDestroy, OnInit } from '@angular/core';
import 'rxjs/add/operator/takeUntil';
// import { takeUntil } from 'rxjs/operators'; // para rxjs ^5.5.0 lettable operators
import { Subject } from 'rxjs/Subject';

import { MiServicio } from '../mi-cosa.service';

@Component({
    selector: 'mi-cosa',
    templateUrl: './mi-cosa.component.html'
})
export class MiCosaComponent implements OnDestroy, OnInit {
    private ngUnsubscribe: Subject = new Subject();
    
    constructor(
        private miServicio: MiServicio,
    ) { }
    
    ngOnInit() {
        this.miServicio.getCosas()
            .takeUntil(this.ngUnsubscribe)
            .subscribe(cosas => console.log(cosas));
            
        /* si se usan lettable operators in rxjs ^5.5.0
        this.migServicio.getCosas()
            .pipe(takeUntil(this.ngUnsubscribe))
            .subscribe(cosas => console.log(cosas));
        */
        
        this.miServicio.getOtrasCosas()
            .takeUntil(this.ngUnsubscribe)
            .subscribe(cosas => console.log(cosas));
            
    }
    
    ngOnDestroy() {
        this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();
    }
}

— — Editado 2 (2016/12/28)

fuente 5

En el tutorial de Angular, el capítulo de rutas ahora dice esto: “El enrutador ( Router) maneja los observables que proporciona y localiza las suscripciones. Las suscripciones se limpian cuando el componente es destruido, protegiendo contra pérdidas de memoria, por lo que no necesitamos cancelar la suscripción de los parámetros de ruta observables.” — Mark Rajcok

— — Editado 1

Fuente 4

En este  video de NgEurope Rob Wormald dice que no necesitas eliminar la suscripción.  También menciona el servicio  http y ActivatedRoute.params en este video de Noviembre 2016.

— — Repuesta Original

TLDR:

Para esta pregunta hay 2 tipos de Observables - de valor finito y valor infinito.

Las Observables http producen valores finitos (1) algo similar a un evento del DOM ( event listener ) produce Observables de valores infinitos.

Si llamas de forma manual a subscribe (sin usar una pipe asíncrona), haz un unsubscribe de las Observables infinitas .

No te preocupes por las finitas , RxJs se encargara de ellas.

Fuente 1

He localizado una respuesta de Rob Wormald en Angular Gitter.

Dice que (reorganizado para que esté más claro y el énfasis es mío)

Si es una secuencia de un solo valor (como una solicitud http (request)) la limpieza manual no es necesaria (suponiendo que te suscribes en el controller de manera manual)

Debería decir "si es una secuencia que termina" (como son las de secuencia de un solo valor, como la http)

Si la secuencia es infinita, deberías elimnar la suscripción (unsubscribe) lo que se consigue usando la pipe asíncrona.

También comenta en este video de youtube sobre Observables que se limpian ellas mismas... en el contexto de las Observables que terminan (como las Promesas (promeses), que siempre terminan porque siempre producen un valor y terminan - nunca nos hemos preocupado de eliminar las suscripciones de promesas para que limpien escuchadores de eventos  xhr (event listeners)).

Fuente 2

También en  la guía Rangle de Angular 2:

En la mayoría de los casos no necesitamos eliminar la suscripción (unsubscribe) a no ser que queramos cancelar antes de tiempo o la Observable dure más que lo que necesita nuestra suscripción. El comportamiento por defecto de los operadores de Observable es eliminar la suscripción tan pronto como los mensajes de .complete() o .error() son publicados. Ten en cuenta que RxJS fue diseñado para utilizarse en modo "dispara y olvidate" en la mayoría de los casos.

Qué quiere decir que nuestra Observable dura más que lo que necesita nuestra suscripción?

Se refiere a cuando una suscripción es creada dentro de un componente que es destruido antes de que la Observable termine.

Entiendo esto así, si suscribimos a una solicitud (request)  http o a una observable que emite 10 valores y nuestro compenente es destruido antes de que esa solicitud  http vuelva o los 10 valores sean emitidos no tenemos ningún problema.

Cuando la solicitud vuelve o el décimo valor es emitido la Observable se completará y todos los recurdos seran liberados.

Fuente 3

El artículo original hacía referencia a un ejemplo en una página que ya no se encuentra.

Source
Top

¿Cómo puedo seleccionar un elemento en una plantilla componente?

263+ votos? 265,966+ vistas
Aman Gupta pregunta,

¿Alguién sabe como obtener un elemento definido en la plantilla (template) de un componente? Polymer lo hace muy fácil con  $ and $$.

Me pregunto como hacerlo en Angular.

En este ejemplo de un tutorial:

import {Component} from '@angular/core'

@Component({
    selector:'mostrar'
    template:`
     <input #miNombre(input)="actualizarNombre(miNombre.value)"/>
     <p>Mi nombre : {{miNombre}}</p>
    `
    
})
export class MostrarComponent {
    miNombre: string = "Aman";
    actualizarNombre(input: String) {
        this.miNombre = input;
    }
}

¿Cómo puedo obtener la referencia a los elementos p o input dentro de la misma clase?

Brocco contesta, (149+ votos)

Puedes obtener la referencia al elemento del DOM con ElementRef inyectandolo en el constructor:

constructor(miElemento: ElementRef) { ... }

Source
Top

¿Cuales son los equivalentes de ngShow y ngHide en Angular?

261+ votos? 206,651+ vistas
Mihai Răducanu pregunta,

Tengo un número de elementos que quiero hacer visibles bajo ciertas condiciones.

En AngularJS haría esto:

<div ng-show="miVar">alguna cosa</div>

¿Cómo lo hago en Angular?

Günter Zöchbauer contesta, (445+ votos)

Enlaza con la propiedad  hidden :

[hidden]="!miVar"

Ver también

• HTML: Lenguaje de etiquetas de hipertexto | MDN (mozilla.org)

hidden tiene algunos problemas porque puede tener conflictos con CSS para la propierdad display.

En este ejemplo de Plunker  some  no desaparece porque tiene un estilo (style).

:host {display: block;}

(Puede que funcione de manera diferente en navegadores diferentes — Yo he usado Chrome 50)

Para evitar ese problema

Lo puedes solucionar añadiendo

[hidden] { display: none !important;}

A un estilo (style) global en index.html.

otro problema

hidden="false"
hidden="{{false}}"
hidden="{{estaEscondido}}" // estaEscondido = false;

es lo mismo que

hidden="true"

y no mostrata el elemento.

hidden="false" asigna la cadena "false" lo que se considera true (porque no es una cadena vacía).
Solamente el valor  false o quitar el atributo hará que se muestre el elemento.

Usar {{}} también convierte la expression a una cadena y no funcionará como esperamos.

Solamente usando  [] funciona como esperamos porque este false es asignado  false en lugar de  "false".

*ngIf vs [hidden]

*ngIf quita el contenido del DOM mientras que [hidden] cambia la propiedad display para que no se muestre el contenido, pero el contenido sigue en el DOM.

Source
Top

Como empaquetar una aplicación de Angular para producción

258+ votos? 111,603+ vistas
Pat M pregunta,

Me gustaría conocer la mejor forma y la más actual (y espero que la más sencilla)  para empaquetar Angular (version 2, 4, …) para producción en un servidor en activo.

Por favor, incluid la versión de Angular en las respuestas para que pueda saber que hacer dependiendo de las versiones.

Nicolas Henneaux contesta, (267+ votos)

2.x, 4.x, 5.x (TypeScript) con Angular CLI

Configurar una vez

• npm install -g @angular/cli
• ng new ficheroDelProyecto crea una aplicación nueva.

Configuran el empaquetado

• ng build --prod (en la línea de comando en el directorio ficheroDelProyecto)
• marca prod para empaquetado para producción (ver la documentación para las opciones de prod).
• Comprime los recursos con Brotli con el siguiente commando for i in dist/*; do brotli $i; done

lo paquetes se generan por defecto en ficheroDelProyecto/dist/

Output

Tamaños con Angular 5.2.8 con CLI 1.7.2

• dist/main.[hash].bundle.js El paquete de tu aplicación [ tamaño: 151 KB para una nueva vacía de CLI , 36 KB comprimida].
• dist/polyfill.[hash].bundle.js con dependencias (@angular, RxJS...) [tamaño: 58 KB para una nueva de Angular CLI vacía, 17 KB comprimida].
• dist/index.html punto de entrada de la aplicación.
• dist/inline.[hash].bundle.js webpack loader (cargador).
• dist/style.[hash].bundle.css definiciones de estilo (style).
• dist/assets recursos copiados de los de Angular CLI según la configuración.

Despliegue (deployment)

Puedes ver un avance de tu aplicación con ng serve --prod en tu servidor para local HTTP y así la aplicación con los ficheros para producción es accesible desde http://localhost:4200.

Para la verdadera producción, tienes que desplegar los ficheros del directorio  dist en el servidor  HTTP de tu elección.

Source
Top

BehaviorSubject vs Observable

250+ votos? 122,248+ vistas
Kevin Mark pregunta,

Estoy informandome sobre patrones en Angular RxJs y no entiendo la diferencia entre BehaviorSubject y un Observable.

Según lo veo yo, un BehaviorSubject es un valor que puede cambiar en el tiempo (uno se puede suscribir a ese valor y los suscriptores reciben el valor actualizado). Esto parece que es precisamente lo que es un Observable.

¿Cuándo usarías un Observable o un BehaviorSubject? ¿Cuál ofrece más ventajas si es que uno ofrece más que el otro?

Shantanu Bhadoria contesta, (425+ votos)

BehaviorSubject es un tipo de sujeto (subject), un subject es un tipo de observable así que te puedes suscribir a él como a cualquier otro observable. Lo que hace único a BehaviorSubject es:

• Necesita un valor inicial ya que siempre debe devolver un valor incluso si no ha recibido un next()
• Cuando encuentra una suscripción, le devuelve el último valor del sujeto (subject).  Un observable común en Angular solo dispara cuando recibe un  onnext
• En cualquier momento se puede sacar el valor mas reciente del sujeto (subject) en código no observable usando el método getValue().

Las características únicas de un sujeto (subject) en comparación con un observable son:

• Es un observador (observer) además de un observable, por lo tanto, puedes mandar valores a un subject ademas de suscribirte a él.

Además, puedes obtener un observable de behaviorSubject utilizando  el método asobservable() de BehaviorSubject.

Un Observable es un genérico, y BehaviorSubject técnicamente es un subtipo de Observable porque BehaviorSubject es un Observable con unas características particulares.

Ejemplo con BehaviorSubject:

// Behavior Subject

// a es un valor inicial. Si hay una suscripcion
// despues de esto, le llega "a" inmediatamente
let bSubject = new BehaviorSubject("a"); 

bSubject.next("b");

bSubject.subscribe((value) => {
  console.log("Suscripcion recibe", value); // suscripcion recibe b, 
                                          // esto no pasaria 
                                          // en un observable generico
                                          // o un subject generico por defecto
});

bSubject.next("c"); // suscripcion recibe c
bSubject.next("d"); // Suscipcion recibe d

Ejemplo 2 con un sujeto común:

// Sujecto comun

let subject = new Subject(); 

subject.next("b");

subject.subscribe((value) => {
  console.log("suscripcion recibe", value); // suscripcion no recibe nada                                                 // en este punto
});

subject.next("c"); // suscripcion recibe c
subject.next("d"); // suscripcion recibe d

Un observable puede crearse con Subject o BehaviorSubject usando subject.asobservable().  La diferencia es que no se pueden mandar valores a un observable usando  next() .

En servicios en Angular, yo usaría BehaviorSubject para un servidor de datos ya que estos servicios a menudo se inicializan antes del componente y BehaviorSubject  te asegura que el componente que consuma este servicio recibe el valor mas reciente de los datos incluso si no hay cambios desde que se creo la suscripcion a estos datos.

Source
Top

@Directive vs @Component en Angular

239+ votos? 61,582+ vistas
Prasanjit Dey pregunta,

¿Cuál es la diferencia entre @Component y @Directive en Angular? Parece que ambas tienen los mismos atributos y hacen lo mismo.

¿Cuáles son los escenarios donde usar cada uno y cuándo es preferible uno sobre otro?

jaker contesta, (327+ votos)

Un @Component requiere una view (página donde mostrarlo) pero un @Directive no.

Directives

Un @Directive de Angular es parecido a uno de de Angular 1.0 con la opción restrict: 'A' (Los directives no están limitados a usarse solamente como atributos). Los directives añaden comportamiento a un elemento del DOM que ya existe,  o a una instancia de un componente que ya existe. Un ejemplo de cuando usar un directive sería para guardar cuando un elemento recibe un click.

import {Directive} from '@angular/core';

@Directive({
    selector: "[guardaEnClick]",
    hostListeners: {
        'click': 'onClick()',
    },
})

class GuardaEnClick {
    constructor() {}
    onClick() { console.log('El elemento ha recibido un click !'); }
}

Y se usaría así:

<button guardaEnClick>Yo guardo cuando recibo un click!<;/button>

Components

Un component (componente), en lugar de añadir/modificar un comportamiento, crea su propia view (página , jerarquía de los elementos del DOM) con su comportamiento adjunto. Un ejemplo de un component para una tarjeta de visita:

import {Component, View} from '@angular/core';

@Component({
  selector: 'tarjeta-visita',
  template: `
    <div>
      <h1>{{nombre}}</h1>
      <p>{{ciudad}}</p>
    </div>
  `
})
class TarjetaVisita {
  @Input() nombre: string
  @Input() ciudad: string
  constructor() {}
}

Y se usaría así:

<tarjeta-visita [nombre]="'foo'" [ciudad]="'bar'"></tarjeta-visita>

TarjetaVisita es un componente UI que se puede reusar en cualquier sitio de nuestra aplicación, incluso dentro de otros componentes. Estos componentes son lo que básicamente constituye la UI (user interface, interfaz de usuario) de nuestra aplicación.

En resumen

Usa un component cuando quieras un conjunto de elementos del DOM que quieras reusar, y que tengan un comportamiento particular a ese componente. Usa un directive cuando quieras tener un comportamiento reusable que suplemente el comportamiento de elementos del DOM.

Source
Top

Error de Angular HTTP GET en TypeScript : http.get(…).map is not a function in [null] (http.get(...).map no es una función en [null])

233+ votos? 141,917+ vistas
Claudiu pregunta,

Tengo un problema con HTTP en Angular.

Quiero conseguir con GET una lista en JSON y mostrarla en la página.

Clase en el servicio

import {Injectable} from "angular2/core";
import {Hall} from "./hall";
import {Http} from "angular2/http";
@Injectable()
export class HallService {
    public http:Http;
    public static PATH:string = 'app/backend/' 
    
    constructor(http:Http) {
        this.http=http;
    }
    
    getObtenerHalls() {
           return this.http.get(HallService.PATH + 'hall.json').map((res:Response) => res.json());
    }
}

Y en  HallListComponent llamo al método getObtenerHalls del servicio:

export class HallListComponent implements OnInit {
    public halls:Hall[];
    public _Id:number;
    
    constructor(private _router:Router,
                private _routeParams:RouteParams,
                private _servicio:HallService) {
        this._Id = +_routeParams.get('id');
    }
    
    ngOnInit() {
        this._servicio.getObtenerHalls().subscribe((halls:Hall[])=>{ 
            this.halls=halls;
        });
    }
}

Pero me da una excepción:

TypeError: this.http.get(...).map is not a function in [null]

hall-center.component

import {Component} from "angular2/core";
import {RouterOutlet} from "angular2/router";
import {HallService} from "./hall.service";
import {RouteConfig} from "angular2/router";
import {HallListComponent} from "./hall-list.component";
import {HallDetailComponent} from "./hall-detail.component";
@Component({
    template:`
        <h2>mi app</h2>
        <router-outlet></router-outlet>
    `,
    directives: [RouterOutlet],
    providers: [HallService]
})

@RouteConfig([
    {path: '/',         name: 'HallCenter', component:HallListComponent, useAsDefault:true},
    {path: '/hall-list', name: 'HallList', component:HallListComponent}
])

export class HallCenterComponent{}

app.component

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES} from "angular2/router";
import {RouteConfig} from "angular2/router";
import {HallCenterComponent} from "./hall/hall-center.component";
@Component({
    selector: 'mi-app',
    template: `
        <h1>Factoria</h1>
        <a [routerLink]="['HallCenter']">Hall - Vista General</a>
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
    {path: '/hall-center/...', name:'HallCenter',component:HallCenterComponent,useAsDefault:true}
])
export class AppComponent { }

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

Thierry Templier contesta, (416+ votos)

Creo que tienes que importar esto:

import 'rxjs/add/operator/map'

O en general, si quieres usar mas métodos de observables, puedes importar:

import 'rxjs/Rx';

ADVERTENCIA: Esto importa todos los más de 50 operadores y los añade a la aplicación lo que afecta el tamaño y el tiempo de carga.

Source
Top

¿Cómo se puede usar jQuery con Angular?

233+ votos? 246,869+ vistas
Waog pregunta,

¿Alguien puede decirme cómo usar jQuery con Angular?

class MiComponent {
    constructor() {
        // como acceder a los elementos del DOM desde aqui
    }
}

Sé que existen soluciones alternativas, como manipular la clase o el id  del elemento del DOM , pero me gustaría una manera más limpia de hacerlo.

werenskjold contesta, (258+ votos)

JQuery en Angular2 es pan comido comparado com ng1. Si estás usando TypeScript podrías referenciar el paquete de jQuery de typescript (o también de sus definiciones).

tsd install jquery --save
o
typings install dt~jquery --global --save

El de las definiciones no te hace falta ya que también podrías usar  any como  $ or jQuery

En tu componente de Angular puedes acceder a un elemento del DOM con @ViewChild() Una vez que la vista (view) se haya inicializado puedes usar la propiedad nativeElement del objecto y pasarla a jQuery.

Declarando $ (o jQuery) como JQueryStatic te da una referencia a jQuery con tipo.

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
declare var $:JQueryStatic;

@Component({
    selector: 'ng-escogido',
    template: `<select #selecElemento>
        <option *ngFor="#elemento of elementos" [value]="elemento" [selected]="elemento === valorSeleccionado">{{elemento}} opcion</option>
        </select>
        <h4> {{valorSeleccionado}}</h4>`
})
export class NgEscogidoComponent implements AfterViewInit {
    @ViewChild('selecElemento') el:ElementRef;
    elementos = ['Primero', 'Segundo', 'Tercero'];
    valorSeleccionado = 'Segundo';
    
    ngAfterViewInit() {
        $(this.el.nativeElement)
            .chosen()
            .on('change', (e, args) => {
                this.valorSeleccionado = args.selected;
            });
    }
}

bootstrap(NgEscogidoComponent);

Puedes verlo en plunker: http://plnkr.co/edit/Nq9LnK?p=preview

tslint te dirá que chosen no es una propiedad en $.  Para corregirlo puedes añadir una definición a la interfaz de JQuery en tu fichero *.d.ts

interface JQuery {
    chosen(options?:any):JQuery;
}

Source
Top

Excepción en Angular: No provider for Http (No hay proveedor de HTTP)

230+ votos ? 142,976+ vistas
daniel pregunta,

Me sale esto EXCEPTION: No provider for Http! en mi aplicación de Angular. ¿Qué estoy haciendo mal?

import {Http, Headers} from 'angular2/http';
import {Injectable} from 'angular2/core'

@Component({
    selector: 'greetings-ac-app2',
    providers: [],
    templateUrl: 'app/greetings-ac2.html',
    directives: [NgFor, NgModel, NgIf, FORM_DIRECTIVES],
    pipes: []
})
export class GreetingsAcApp2 {
    private str:any;
    
    constructor(http: Http) {
    
        this.str = {str:'test'};
        http.post('http://localhost:18937/cuenta/registrausuario/',
            JSON.stringify(this.str),
            {
                headers: new Headers({
                    'Content-Type': 'application/json'
                })
            });

Philip Miglinci contesta, (381+ votos)

Importa HttpModule

import { HttpModule } from '@angular/http';

@NgModule({
    imports: [ BrowserModule, HttpModule ],
    providers: [],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
export default class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

Es mejor separar el código en dos ficheros diferentes.

Source
Top

Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’ (No se puede enlazar a 'formGroup' porque no es una propiedad conocida de 'form')

227+ votos? 127,130+ vistas
johnnyfittizio pregunta,

EL PROBLEMA:

¡por favor! Estoy intentando construir una aplicación de Angular2 muy sencilla pero no funciona.

VERSION DE ANGULAR:

Angular 2.0.0 Rc5

EL ERROR:

Can't bind to 'formGroup' since it isn't a known property of 'form'

EL CÓDIGO:

La vista:

<form [formGroup]="nuevaTareaForm" (submit)="crearNuevaTarea()">
    <div class="form-group">
        <label for="nombre">Nombre</label>
        <input type="text" name="nombre" required>
    </div>
     <button type="submit" class="btn btn-default">Enviar</button>
</form>

El controller - componente:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder }  from '@angular/forms';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
import { Tarea } from './tarea';

@Component({
    selector: 'tarea-anadir',
    templateUrl: 'app/tarea-anadir.component.html'
    
})

export class TareaAnadirComponent {

    nuevaTareaForm: FormGroup;
    
    constructor(fb: FormBuilder) 
    {
        this.nuevaTareaForm = fb.group({
            nombre: ["", Validators.required]
        });
    }
    
    anadirNuevaTarea()
    {
        console.log(this.nuevaTareaForm.value)
    }
    
}

The ngModule:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { routing }        from './app.routing';
import { AppComponent }  from './app.component';
import { TareaServicio } from './tarea.servicio'

@NgModule({
    imports: [ 
        BrowserModule,
        routing,
        FormsModule
    ],
    declarations: [ AppComponent ],
    providers: [
        TareaServicio
    ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

LA PREGUNTA:

¿Por qué me sale ese error?

Stefan Svrkota contesta, (465+ votos)

RC5 - SOLUCIÓN

Necesitas importar import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms' en tu controller y añadirlo a tus directives en @Component.

Cuando tengas eso solucionado, puede que te de otro error porque no has añadido formControlName="nombre" .

RC6/RC7/VERSIÓN FINAL - SOLUCIÓN

Tienes que importar ReactiveFormsModule de@angular/forms en tu módulo. Aquí tienes el ejemplo importando ReactiveFormsModule :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

Para clarificar, formGroup es un selector para una directive llamada FormGroupDirective que es parte de ReactiveFormsModule, por eso hay que importarlo. Se usa para enlazar un FormGroup existente a un elemento del DOM.

Source
Top

Error DI de Angular— EXCEPTION: Can’t resolve all parameters (Excepción: No se pueden resolver todos los parámetros)

221+ votos ? 142,497+ vistas
Keith Otto pregunta,

He construido una aplicación básica en Angular, pero tengo un problema extraño. No puedo inyectar un servicio en uno de mis componentes. Funciona en cualquiera de los otros tres componentes que tengo.

El servicio es este:

import { Injectable } from '@angular/core';

@Injectable()
export class MovilService {
  pantallaAncho: number;
  pantallaAlto: number;
  
  constructor() {
    this.pantallaAncho = window.outerWidth;
    this.pantallaAlto = window.outerHeight;
    
    window.addEventListener("resize", this.onWindowResize.bind(this) )
  }
  
  onWindowResize(ev: Event) {
    var win = (ev.currentTarget as Window);
    this.pantallaAncho = win.outerWidth;
    this.pantallaAlto = win.outerHeight;
  }
  
}

Y el componente en el que no funciona es:

import { Component, } from '@angular/core';
import { NgClass } from '@angular/common';
import { ROUTER_DIRECTIVES } from '@angular/router';

import {MovilService} from '../';

@Component({
  moduleId: module.id,
  selector: 'pm-header',
  templateUrl: 'header.component.html',
  styleUrls: ['header.component.css'],
  directives: [ROUTER_DIRECTIVES, NgClass],
})
export class HeaderComponent {
  movilNav: boolean = false;
  
  constructor(public ms: MovilService) {
    console.log(ms);
  }
  
}

El error que me da es este:

EXCEPTION: Can't resolve all parameters for HeaderComponent: (?).

Tengo al servicio en la función de bootstrap así que tiene un provider. Y lo puedo inyectar en los constructores de los otros componentes que tengo.

Günter Zöchbauer contesta, (272+ votos)

Importalo directamente en el archivo en que es declarado.

No sé exactamente la causa del problema, pero lo he visto mencionado varias veces (probablemente algún tipo de dependencia circular).

También se podría arreglar cambiando el orden de los exports (no sé los detalles pero también lo he visto mencionado antes)

Source
Top

Angular — Establecer los headers (encabezamientos) para cada request (solicitud)

209+ votos? 205,557+ vistas
Avijit Gupta pregunta,

Necesito establecer headers de autorización (Authorization) una vez que el usuario haya iniciado la sesión, para cada solicitud posterior.

Para establecer los headers para una solicitud (request) particular,

import {Headers} from 'angular2/http';
var headers = new Headers();
headers.append(headerName, value);

// HTTP POST con estos headers
this.http.post(url, data, {
  headers: headers
})
// Hacer algo con la respuesta

Pero no sería factible configurar manualmente para cada solicitud.

¿Cómo configuro los encabezados (headers) solamente una vez cuando el usuario inicia la sesión y también cómo los elimino al cerrar la sesión?

Thierry Templier contesta, (283+ votos)

Podrías tener un servicio que envuelva el objecto Http original de Angular. Algo como esto:

import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';

@Injectable()
export class HttpClient {

  constructor(private http: Http) {}
  
  crearAutorizacionHeader(headers: Headers) {
    headers.append('Authorization', 'Basic ' +
      btoa('username:password')); 
  }
  
  get(url) {
    let headers = new Headers();
    this.crearAutorizacionHeader(headers);
    return this.http.get(url, {
      headers: headers
    });
  }
  
  post(url, data) {
    let headers = new Headers();
    this.crearAutorizacionHeader(headers);
    return this.http.post(url, data, {
      headers: headers
    });
  }
}

Y en vez de inyectar el objecto Http inyecta (HttpClient).

import { HttpClient } from './http-client';

export class MiComponent {
  // inyectamos "nuestro" HttpClient, lo llamo Http por simplificar
  constructor(http: HttpClient) {
    this.http = httpClient;
  }
  
  hacerAlgo() {
    this.http.post(url, data).subscribe(result => {
        // console.log( result );
    });
  }
}

También creo que se podría hacer algo usando múltiples proveedores de la clase Http con tu propia clase que extienda la clase Http .

Source
Top

¿Cómo se puede usar *ngIf else en Angular?

205+ votos? 203,768+ vistas
kawli norman pregunta,

Quiero usar *ngIf else (disponible desde la versión 4) en este ejemplo:

<div *ngIf="isValid">
  contenido ...
</div>

<div *ngIf="!isValid">
 otro contenido...
</div>

¿Cómo puedo hacer lo mismo con  ngIf else ?

Bougarfaoui El houcine contesta, (384+ votos)

Angular 4 y 5:

Usando else :

<div *ngIf="isValid;else otro_contenido">
    contenido ...
</div>

<ng-template #otro_contenido>otro contenido...</ng-template>

También puedes usar then else :

<div *ngIf="isValid;then contenido else otro_contenido">esto se ignora</div>

<ng-template #contentenido>contenido...</ng-template>
<ng-template #otro_contenido>otro contenido...</ng-template>

o then  :

<div *ngIf="isValid;then contenido"></div>

<ng-template #contenido>contenido...</ng-template>

Demo :

Plunker

Detalles:

<ng-template> : Es la implementación de Angular de la etiqueta <template> que de acuerdo a MDN :

El elemento HTML <template> es un mecanismo para mantener el contenido HTML del lado del cliente que no se renderiza cuando se carga una página, pero que posteriormente puede ser instanciado durante el tiempo de ejecución empleando JavaScript.

Source
Top

Error: Angular no provider for NameService (No hay proveedor para NombreServicio)

196+ votos? 186,526+ vistas
M.Svrcek pregunta,

Tengo un problema cargando una clase en un componente de Angular. He intentado solucionarlo durante mucho tiempo incluso poniéndolo en un solo fichero.  Tengo esto.

Application.ts

/// <reference path="../typings/angular2/angular2.d.ts" />

import {Component,View,bootstrap,NgFor} from "angular2/angular2";
import {NombreService} from "./services/NombreService";

@Component({
    selector:'mi-app',
    injectables: [NombreService]
})
@View({
    template:'<h1>Hola {{nombre}}</h1>' +
    '<p>Amigos</p>' +
    '<ul>' +
    '   <li *ng-for="#nombre of nombres">{{nombre}}</li>' +
    '</ul>',
    directives:[NgFor]
})

class MiAppComponent
{
    nombre:string;
    nombres:Array<string>;
    
    constructor(nombreService:NombreService)
    {
        this.nombre = 'Michal';
        this.nombres = nombreService.getObtenNombres();
    }
}
bootstrap(MiAppComponent);

services/NombreService.ts

export class NombreService {
    nombres: Array<string>;
    constructor() {
        this.nombres = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }
    getObtenNombres()
    {
        return this.nombres;
    }
}

Me da el error “No provider for NombreService” …

¿Puede alguien ayudarme?

Klas Mellbourn contesta, (309+ votos)

Tienes que usar providers en lugar de injectables

@Component({
    selector: 'mi-app',
    providers: [NombreService]
})

Source
Top

Vinculando el elemento seleccionado a un object en Angular

194+ votos? 197,048+ vistas
RHarris pregunta,

Soy nuevo en Angular y estoy intentando familiarizarme con las novedades.

Me gustaría vincular un elemento seleccionado a una lista de objectos:

@Component({
   selector: 'miApp',
   template: `<h1>Mi Aplicacion</h1>
              <select [(ngModel)]="valorSeleccionado">
                 <option *ngFor="#p de paises" value="p.id">{{c.nombre}}</option>
              </select>`
})
export class AppComponent{
    paises = [
       {id: 1, nombre: "United States"},
       {id: 2, nombre: "Australia"}
       {id: 3, nombre: "Canada"}
       {id: 4, nombre: "Brazil"}
       {id: 5, nombre: "England"}
     ];
    valorSeleccionado = null;
}

En este caso, parece que valorSeleccionado sería un numero — el id del seleccionado.

Sin embargo, lo que quiero es vincular al objecto país para el que valorSeleccionado es el objecto y no el id.  He intentado esto:

<option *ngFor="#c de paises" value="c">{{c.nombre}}<;/option>

pero parece que no funciona. Parece que pone un objeto en mi valorSeleccionado — pero no el objeto que espero. Lo puedes ver en mi Plunker.

También he intentado cambiar el evento change para asignar el objeto yo mismo basado en el id; pero parece que el evento sucede antes de que se haya vinculado ngModel con el valor actualizado — en ese momento no tengo acceso al valor nuevo.

Hay una forma limpia de vincular un elemento seleccionado a un objeto de Angular 2?

Günter Zöchbauer contesta, (361+ votos)

<h1>Mi Aplicacion</h1>
<select [(ngModel)]="valorSeleccionado">
  <option *ngFor="let p of paises" [ngValue]="p">{{p.nombre}}</option>
</select>

Plunker

NOTA: puedes usar  [ngValue]="p" en lugar de  [ngValue]="p.id" donde p es el objeto para el país.

[value]="..." solamente acepta cadenas
[ngValue]="..." acepta cualquier tipo

actualización

Si el value es un objeto, la instancia preseleccionada debe ser identica a uno de los valores.

desde 4.0.0-beta.7 también se puede comparar así:

<select [compareWith]="compareFn" ...

Cuidado si quieres acceder a this dentro de compareFn.

compareFn = this._compareFn.bind(this);

// o 
// compareFn = (a, b) => this._compareFn(a, b);

_comareFn((a, b) {
   if(this.x ...) {
     ...
}

Source
Top

¿Cuál es la diferencia entre declaraciones, proveedores e importación (import) en NgModule?

188+ votos? 55,432+ vistas
Ramesh Papaganti pregunta,

Estoy intentando entender Angular (también llamado Angular2+), y me he encontrado esto.  

@Module

1. Imports
2. Declarations
3. Providers

Günter Zöchbauer contesta, (277+ votos)

Conceptos de Angular

• imports hace que las declaraciones exportadas (exports) de otros módulos estén disponibles en el módulo actual
• declarations : se usan para crear directives (incluyendo componentes y pipes) desde el módulo actual para que esten disponibles para otras directives (como otros componentes) en el mismo módulo. Los selectores de directives, componentes o conductos (pipes) solamente se comparan con el HTML si se declaran o importan.
• providers se usan para dar a conocer servicios y valores al DI (dependency injection : inyección de dependencias). Se añaden al ámbito raíz (root) y se inyectan a otros servicios o directivas que los tengan como dependencia.

Un caso especial para providers son módulos con carga diferida que obtienen su propio inyector secundario (child). providers de estos tipos de módulos solo se proporcionan a estos módulos de carga diferida (no a toda la aplicación como ocurre con otros módulos).

• exports hace que los componentes, directives, y pipes (conductos) esten disponibles para los modulos que añadan este módulo a imports. exports también se puede usar para re-exportar módulos como CommonModule y FormsModule, lo que se hace a menudo en módulos compartidos.
• entryComponents registra componentes para la compilación fuera de línea para que puedan usarse con ViewContainerRef.createComponent(). Los componentes utilizados en las configuraciones del enrutador se agregan implícitamente.

TypeScript (ES2015) imports

import ... from 'foo/bar' son para imports de TypeScript. Los necesitas cuando usas un identificador en un fichero de TypeScript que es declarado en otro fichero de TypeScript.

Los  @NgModule() imports de Angular y el  import de TypeScript son conceptos diferentes.

La mayoría son simplemente la sintaxis ECMAScript 2015 (ES6) de módulo que también usa TypeScript.

Source
Top

En Angular, ¿Cómo se determina la ruta activa?

187+ votos? 100,870+ vistas
Michael Oryl pregunta,

NOTA: Hay muchas respuestas diferentes, la mayoría han sido validas en algún momento. Lo que funciona ha cambiado varias veces a medida que el equipo de Angular ha cambiado el funcionamiento del Router. El Router version 3.0 que será el router en Angular no funciona con algunas de estas soluciones sino que  el mismo router ofrece una solución muy simple. Desde RC.3, la solucián mas aceptada es usar [routerLinkActive] como se muestra aquí.

En una aplicación de Angular (en 2.0.0-beta.0 cuando escribo esto), ¿Cómo se determina cuál es la ruta activa?

Estoy trabajando en una aplicación que usa Bootstrap 4 y necesito una forma de marcar la navegación enlaces/botones (links/buttons) como activos cuando su componente asociado es el que se muestra en la etiqueta  <router-output> .

Sé que puedo mantener el estado yo mismo cuando se pulsa un botón, pero eso no valdría cuando tengo varias trayectorias en la misma ruta (como un menu principal y otro local en el componenete principal).

Cualquier sugerencia o enlace sería apreciado. Gracias.

jessepinho contesta, (229+ votos)

Con el router nuevo de Angular, puedes añadir el atributo [routerLinkActive]="['tu-nombre-de-class']" a todos tus enlaces:

<a [routerLink]="['/home']" [routerLinkActive]="['is-active']">Home</a>

O la forma simplificada sin el array si solo se necesita una clase:

<a [routerLink]="['/home']" [routerLinkActive]="'is-active'">Home</a>

Source
Top

Opciones CLI SASS de Angular

187+ votos? 106,289+ vistas
JDillon522 pregunta,

Soy nuevo en Angular y vengo de la comunidad Ember. Estoy intentando usar el nuevo Angular-CLI basado en Ember-CLI.

Necesito saber la mejor manera de trabajar con SASS en un nuevo proyecto de Angular. He intentado usar el repo ember-cli-sass para ver si podía seguirlo ya que hay un número de componentes comunes enAngular-CLI que están basados en módulos de Ember-CLI.

No ha funcionado pero no estoy seguro de estar configurando las cosas bien.

Además, ¿Cuál es la mejor manera de organizar estilos en un nuevo proyecto de Angular? Estaría bien tener el fichero sass en la misma carpeta que el componente.

Mertcan Diken contesta, (323+ votos)

Cuando estés creando el proyecto, utiliza esto:

ng new Mi_Nuevo_Proyecto --style=sass

Esto crea tus ficheros con el estilo sass determinado.

Si quieres tu propia sintaxis de scss crea el proyecto de esta manera :

ng new Mi_Nuevo_Proyecto --style=scss

Si estás cambiando el estilo en tu proyecto:

ng set defaults.styleExt scss

CLI hace el resto.

Source
Top

Activar la detección de cambios en Angular manualmente

186+ votos? 102,556+ vistas
jz87 pregunta,

Estoy escribiendo un componente en Angular con la propierdad Mode(): string. Me gustaría darle un valor programáticamente y no como respuesta a un evento. El problema es que no teniendo un evento del navegador, una plantilla enlazando a {{Mode}} no se muestra actualizada. ¿hay alguna manera de activar el cambio manualmente?

Mark Rajcok contesta, (345+ votos)

Prueba alguna de estas:

• ApplicationRef.tick() - similar a $rootScope.$digest() de AngularJS's-- i.e., chequear el árbol de herarquía completo.
• NgZone.run(callback) - similar a $rootScope.$apply(callback) -- i.e., evalua la función de callback dentro de la zona de Angular. Creo, pero no lo sé seguro, que esto acaba comprobando todo el árbol del componente después de ejecutar la función callback.
• ChangeDetectorRef.detectChanges() - similar a $scope.$digest() -- i.e., comprueba solamente este componente y sus hijos.

Puedes inyecar ApplicationRef, NgZone, o ChangeDetectorRef en tu componente.

Source
Top

Angular y Typescript: No se pueden encontrar los nombres.

184+ votos? 181,472+ vistas
user233232 pregunta,

Estoy usando Angular (versión 2) con TypeScript (versión 1.6) y al compilar me salen estos errores:

Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/change_detection/parser/locals.d.ts(4,42): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(1,25): Error TS2304: Cannot find name 'MapConstructor'.
    node_modules/angular2/src/core/facade/collection.d.ts(2,25): Error TS2304: Cannot find name 'SetConstructor'.
    node_modules/angular2/src/core/facade/collection.d.ts(4,27): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(4,39): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(7,9): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(8,30): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(11,43): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(12,27): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(14,23): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(15,25): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(94,41): Error TS2304: Cannot find name 'Set'.
    node_modules/angular2/src/core/facade/collection.d.ts(95,22): Error TS2304: Cannot find name 'Set'.
    node_modules/angular2/src/core/facade/collection.d.ts(96,25): Error TS2304: Cannot find name 'Set'.
    node_modules/angular2/src/core/facade/lang.d.ts(1,22): Error TS2304: Cannot find name 'BrowserNodeGlobal'.
    node_modules/angular2/src/core/facade/lang.d.ts(33,59): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/promise.d.ts(1,10): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(3,14): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(8,32): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(9,38): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(10,35): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(10,93): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(11,34): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(12,32): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(12,149): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/facade/promise.d.ts(13,43): Error TS2304: Cannot find name 'Promise'.
    node_modules/angular2/src/core/linker/element_injector.d.ts(72,32): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/element_injector.d.ts(74,17): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/element_injector.d.ts(78,184): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/element_injector.d.ts(83,182): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/element_injector.d.ts(107,37): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/proto_view_factory.d.ts(27,146): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(52,144): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(76,79): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(77,73): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(94,31): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(97,18): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(100,24): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(103,142): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/linker/view.d.ts(104,160): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/render/api.d.ts(281,74): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/zone/ng_zone.d.ts(1,37): Error TS2304: Cannot find name 'Zone'.

Este es el código:

import 'reflect-metadata';
import {bootstrap, Component, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/core';
@Component({
  selector: 'mi-app',
  template: '<input type="text" [(ng-model)]="titulo" /><h1>{{titulo}}</h1>',
  directives: [ CORE_DIRECTIVES ]
})
class AppComponent {
  titulo :string;
  
  constructor() {
    this.titulo = 'hola angular 2';
  }
}
bootstrap(AppComponent);

basarat contesta, (50+ votos)

Un problema conocido,

La razón principal: el fichero .d.ts incluido implícitamente con TypeScript varía con el objetivo de compilación, así que se necesitan más variables de entorno cuando el objetivo es es5 incluso si las cosas están presentes en runtimes (e.g. chrome).

Source
Top

Angular — ¿Cuál es el significado de module.id en el componente?

181+ votos? 54,337+ vistas
Nishchit Dhanani pregunta,

En una aplicación de Angular, he visto que @Component tiene la propiedadmoduleId. ¿Qué significa?

Y cuando module.id no está definida en ningún sitio, la app aún funciona. ¿Cómo puede seguir funcionando?

@Component({
  moduleId: module.id,
  selector: 'ng-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [AppComponent]
});

Nishchit Dhanani contesta, (145+ votos)

El lanzamiento beta de Angular (desde la versión 2-alpha.51) admite activos relativos para componentes, como templateUrl y  styleUrls en  @Component.

module.id funciona cuando se usa CommonJS. No debe preocuparte como funciona.

Recuerda: establecer moduleId: module.id en @Component es la clave aquí. Si no tienes eso, Angular 2 busca tus ficheros a nivel de la raíz.

Actualizado a 16 Sep 2016:

Si estás usando webpack para empaquetar no necesitas module.id en @Component. Webpack lo añade automáticamente al final del paquete.

Source
Top

¿Cómo se puede obtener una nueva selección en "select" en Angular 2?

175+ votos? 203,064+ vistas
Hongbo Miao pregunta,

Estoy usando Angular 2 (TypeScript).

Quiero hacer algo para una selección nueva, pero cuando llego a onChange() siempre tiene la última selección. ¿Cómo puedo obtener la nueva?

<select [(ngModel)]="dispositivoSeleccionado" (change)="onChange($event)">
    <option *ngFor="#i of dispositivos">{{i}}</option>
</select>

onChange($event) {
    console.log(this.dispositivoSeleccionado);
    // Aqui quiero hacer algo para el nuevo, 
    // pero me sale el anterior, no lo que acabo de seleccionar
}

Mark Rajcok contesta, (370+ votos)

Si no necesitas enlace de datos bidireccional:

<select (change)="onChange($event.target.value)">
    <option *ngFor="let i of dispositivos">{{i}}</option>
</select>

onChange(valorDispositivo) {
    console.log(valorDispositivo);
}

Para enlace de datos bidireccional,  separa el enlace del evento y la propiedad:

<select [ngModel]="dispositivoSeleccionado" (ngModelChange)="onChange($event)" name="sel2">
    <option [value]="i" *ngFor="let i of dispositivo">{{i}}</option>
</select>

export class AppComponent {
  dispositivos = 'uno dos tres'.split(' ');
  dispositivoSeleccionado = 'dos';
  onChange(nuevoValor) {
    console.log(nuevoValor);
    this.dispositivoSeleccionado = nuevoValor;
    // ... otras cosas  ...
}

Si dispositivos es un arreglo de objectos, enlaza ngValue en lugar de value:

<select [ngModel]="dispositivoSeleccionadoObj" (ngModelChange)="onChangeObj($event)" name="sel3">
  <option [ngValue]="i" *ngFor="let i of dispositivosObjectos">{{i.nombre}}</option>
</select>
{{dispositivoSeleccionadoObj | json}}

export class AppComponent {
  dispositivosObjectos = [{nombre: 1}, {nombre: 2}, {nombre: 3}];
  dispositivoSeleccionadoObj = this.dispositivosObjectos[1];
  onChangeObj(nuevoObj) {
    console.log(nuevoObj);
    this.dispositivoSeleccionadoObj = nuevoObj;
    // ... otras cosas ...
  }
}

Plunker — no usa <form>
Plunker - usa <form> y usa las nuevas forms API.

Source
Top

Excepción de Angular: Can’t bind to ‘ngForIn’ since it isn’t a known native property (No se puede vincular a 'ngForIn' porque no es una propiedad nativa conocida.

172+ votos? 48,252+ vistas
Mark Rajcok pregunta,

¿Qué estoy haciendo mal?

import {bootstrap, Component} from 'angular2/angular2'

@Component({
  selector: 'conf-charlas',
  template: `<div *ngFor="let charla in charlas">
     {{charla.titulo}} by {{charla.orador}}
     <p>{{charla.descripcion}}
   </div>`
})
class ConfCharlas {
  talks = [ {titulo: 't1', orador: 'Brian', descripcion: 'charla 1'},
            {titulo: 't2', orador: 'Julie', descripcion: 'charla 2'}];
}
@Component({
  selector: 'mi-app',
  directives: [ConfCharlas],
  template: '<conf-charlas></conf-charlas>'
})
class App {}
bootstrap(App, [])

El error:

EXCEPTION: Template parse errors:
Can't bind to 'ngForIn' since it isn't a known native property
("<div [ERROR ->]*ngFor="let charla in charlas">

Mark Rajcok contesta, (403+ votos)

Dado que esta es por lo menos la tercera vez que he perdido más de 5 minutos en este problema, he pensado en publicar las preguntas y respuestas. Espero que ayude a alguien más en el futuro... ¡probablemente a mí!

Puse in en lugar de of en el ngFor.

Antes de 2-beta.17, debería ser:

<div *ngFor="#charla of charlas">

En beta.17, usa la sintaxis let en lugar de #. Mira la ACTUALIZACIÓN más abajo.

Date cuenta que la sintaxis ngFor se convierte en:

<template ngFor #charla [ngForOf]="charlas">
  <div>...</div>
</template>

Si usamos in , se convierte en

<template ngFor #charla [ngForIn]="charlas">
  <div>...</div>
</template>

Ya que ngForIn no es una directive con una propiedad de input con el mismo nombre (como ngIf), Angular intenta ver si es una propiedad conocida (nativa) del elemento template y si no lo es, sale el error.

ACTUALIZACIÓN— en  2-beta.17, usa  let en lugar de #. Esto cambia lo siguiente:

<div *ngFor="let charla of charlas">

Date cuenta de que ngFor se convierte en:

<template ngFor let-charla [ngForOf]="charlas">
  <div>...</div>
</template>

Si usas  in se convierte en

<template ngFor let-charla [ngForIn]="charlas">
  <div>...</div>
</template>

Source
Top

*ngIf y *ngFor en el mismo elemento causa un error

171+ votos? 85,728+ vistas
garethdn pregunta,

Tengo un problema usando los *ngFor y *ngIf de Angular si los uso en el mismo elemento.

Cuando intento recorrer la colección con *ngFor, la colección se ve como null y da error al intentar acceder a sus propiedades.

@Component({
  selector: 'shell',
  template: `
    <h3>Shell</h3><button (click)="toggle()">Toggle!</button>
    
    <div *ngIf="muestra" *ngFor="let cosa of cosas">
      {{log(cosa)}}
      <span>{{cosa.nombre}}</span>
    </div>
  `
})

export class ShellComponent implements OnInit {

  public cosas:any[] = [];
  public muestra:boolean = false;
  
  constructor() {}
  
  ngOnInit() {
    this.cosas = [
      { nombre: 'abc', id: 1 },
      { nombre: 'huo', id: 2 },
      { nombre: 'bar', id: 3 },
      { nombre: 'foo', id: 4 },
      { nombre: 'thing', id: 5 },
      { nombre: 'other', id: 6 },
    ]
  }
  
  toggle() {
    this.muestra = !this.muestra;
  }
  
  log(cosa) {
    console.log(cosa);
  }
  
}

Sé que lo fácil es mover *ngIf un nivel más arriba pero para casos como recorrer una lista de elementos en una ul, acabaría con un li vacío si la colección no tiene elementos, o mi li está envuelto en contenedores de elementos redundantes.

Ejemplo en plnkr.

Este es el error:

EXCEPTION: TypeError: Cannot read property 'nombre' of null in [{{cosa.nombre}} in ShellComponent@5:12]

¿Estoy haciendo algo mal o es un error?

Günter Zöchbauer contesta, (284+ votos)

Angular2 no permite más de una directiva (directive) estructural en el mismo elemento.
Puedes usar el elemento <ng-container> para separar los elementos con cada directiva estructural, pero no está estampada en el DOM.

<ng-container *ngIf="muestra">
  <div *ngFor="let cosa of cosas">
    {{log(cosa)}}
    <span>{{cosa.nombre}}</span>
  </div>
</ng-container>

<ng-template> (<template> antes de Angular4) te deja hacer lo mismo pero de manera diferente, con una sintaxis confusa y no recomendada

<ng-template [ngIf]="muestra">
  <div *ngFor="let cosa of cosas">
    {{log(cosa)}}
    <span>{{cosa.nombre}}</span>
  </div>
</ng-template>

Source
Top

¿Cuál es el equivalente del $watch de AngularJS en Angular?

169+ votos ? 95,029+ vistas
Erwin pregunta,

En AngularJS se podían especificar watchers (observadores) para observar cambios en las variables usando  $watch de $scope. ¿Cuál es el equivalente de observar cambios de variables (en, por ejemplo, variables de componentes) en Angular?

Mark Rajcok contesta, (226+ votos)

En Angular 2, la detección de cambios es automática… $scope.$watch() y $scope.$digest() D.E.P.

Desafortunadamente, la sección de detección de cambios de la guía para desarrolladores aún no está escrita.

Aquí está como lo entiendo yo:

• Zone.js  —intercepta todas las API asíncronas en el navegador (cuando Angular está corriendo). Por eso podemos usar setTimeout() dentro de nuestros componentes en lugar de algo como $timeout... porquesetTimeout() se cambia durante en runtime.
• Angular construye y mantiene un árbol de "detectores de cambio". Hay uno (class) por componente/directive. (Puede obtener acceso a este objeto inyectando ChangeDetectorRef.) Estos detectores de cambios se crean cuando Angular crea componentes. Realizan un seguimiento del estado de todos tus enlaces, para ver si han cambiado. Estos son, en cierto sentido, similares a los  $watches() automáticos que Angular 1 establecería para los enlaces {{}} en la plantilla (template).
  A diferencia de Angular 1, el gráfico de detección de cambios es un árbol dirigido y no puede tener ciclos (esto hace que Angular 2 tenga mucho más rendimiento, como veremos a continuación.).
• Cuando se dispara un evento (dentro de la zona Angular), se ejecuta el código que escribimos (la devolución de llamada del controlador de eventos).Puede actualizar cualquier tipo de datos que quiera— el modelo de la aplicació compartido/estado y/o el estado de la vista (view) del componente.
• Después de eso, debido a los ganchos añadidos por Zone.js, ejecuta el algoritmo de detección de cambios de Angular. De forma predeterminada (es decir, si no está utilizando la detección de cambio onPush en ninguno de tus componentes), cada componente del árbol se examina una vez (TTL=1)... desde arriba, en primer orden de profundidad. (Bueno, si estás en modo desarrollador, la detección de cambios se ejecuta dos veces (TTL=2). Realiza comprobaciones de cambios en todos sus enlaces, utilizando esos objetos detectores de cambios.
• Se llama a los enlaces de ciclo de vida como parte de la detección de cambios.
  Si los datos del componente que deseas ver son una propiedad de entrada primitiva(String, boolean, number), puedes implementar ngOnChanges() para que se te notifique de los cambios.
  Si la propiedad de entrada es un tipo de referencia (object, array, etc.), pero la referencia no cambió (e.g., agregaste un elemento a un arreglo existente), tendrás que implementar ngDoCheck() .
  Solamente debes cambiar las propiedades del componente y/o las propiedades de los componentes descendientes (debido a la implementación de recorrido de un solo árbol -- i.e., flujo de datos unidireccional). Aqui hay un ejemplo en plunker que no lo cumple.
• Para cualquier cambio de vinculación que se encuentre, los componentes se actualizan y, a continuación, se actualiza el DOM. La detección de cambios ya ha finalizado.
• El navegador nota los cambios de DOM y actualiza la pantalla.

Otras referencias para saber más:

• Savkin’s Deteción de cambios reinventada — video (puedes configurar para que se subtitule)
• El video de Brian y el de Miško sobre Zone.js. El de Brian es sobre Zone.js. El de Miško trata sobre cómo Angular 2 usa Zone.js para implementar la detección de cambios. También habla sobre la detección de cambios en general, y un poco sobre onPush.

Source
Top

Importando lodash en angular2 + aplicaciones typescript

167+ votos? 104,431+ vistas
Davy pregunta,

Me está costando importar los módulos de lodash. He creado mi proyecto con npm+gulp, y sigo chocando con la misma pared. He probado con el lodash convencional, pero también lodash-es.

El paquete de lodash de npm: (tiene un fichero index.js en la carpeta raíz)

import * as _ from 'lodash';

Resultado:

error TS2307: Cannot find module 'lodash'.

El paquete de lodash-es de npm: (tiene un export lodash.js por defecto en la carpeta raíz)

import * as _ from 'lodash-es/lodash';

Resultado:

error TS2307: Cannot find module 'lodash-es'.

Tanto gulp como webstorm tienen el mismo problema.

Lo curioso es que esto no da error:

import 'lodash-es/lodash';

… pero no hay  “_” …

Mi fichero tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

Mi gulpfile.js:

var gulp = require('gulp'),
    ts = require('gulp-typescript'),
    uglify = require('gulp-uglify'),
    sourcemaps = require('gulp-sourcemaps'),
    tsPath = 'app/**/*.ts';
    
gulp.task('ts', function () {
    var tscConfig = require('./tsconfig.json');
    
    gulp.src([tsPath])
        .pipe(sourcemaps.init())
        .pipe(ts(tscConfig.compilerOptions))
        .pipe(sourcemaps.write('./../js'));
});

gulp.task('watch', function() {
    gulp.watch([tsPath], ['ts']);
});

gulp.task('default', ['ts', 'watch']);

Si lo entiendo bien, moduleResolution:’node’ en mi tsconfig debería apuntar los imports al fichero node_modules, donde lodash y lodash-es están instalados. También he probado maneras diferentes de importar: trayectorias (paths) absolutas, relativas, pero nada funciona. ¿alguna idea?

Si es necesario puedo poner un pequeño fichero zip.

Taytay contesta, (293+ votos)

Así es como se hace con Typescript 2.0: (tsd y typings están en desuso a favor de lo siguiente):

$ npm install --save lodash

# Esto es lo nuevo: 
$ npm install --save @types/lodash

Luego en tu fichero .ts:

Esto:

import * as _ from "lodash";

O esto (sugerido por @Naitik):

import _ from "lodash";

No sé seguro cual es la diferencia. Nosotros preferimos y usamos la primera sintaxis. Sin embargo, hay quien dice que a ellos no les funciona, y alguien más comentó que la segunda sintaxis es incompatible con módulos de webpack en lazy loaded.

Editado el 27th Febrero, 2017:

Según @Koert abajo, import * as _ from "lodash"; es la única sintaxis que funciona con Typescript 2.2.1, lodash 4.17.4, y @types/lodash 4.14.53. Dice que la otra sintaxis da el error "has no default export" (no tiene export por defecto).

Source
Top

¿Cómo se detecta un cambio de ruta en Angular?

160+ votos? 108,593+ vistas
AngularM pregunta,

Quiero detectar un cambio de ruta en AppComponent.

A partir de entonces, comprobaré el token de usuario global para ver si ha iniciado sesión. Luego, puedo redirigir al usuario si no ha iniciado sesión.

Ludohen contesta, (223+ votos)

En Angular 2 puedes subscribe (evento Rx) a una instancia de Router. Entonces puesdes hacer cosas como esta:

class MiClase {
  constructor(private router: Router) {
    router.subscribe((val) => /*lo que sea*/)
  }
}

Editado (desde rc.1)

class MiClase {
  constructor(private router: Router) {
    router.changes.subscribe((val) => /*lo que sea*/)
  }
}

Editado 2 (desde 2.0.0)

class MiClase {
  constructor(private router: Router) {
    router.events.subscribe((val) => {
        // ver tambien
        console.log(val instanceof NavigationEnd) 
    });
  }
}

Source
Top

Global Events en Angular (eventos globales)

157+ votos ? 83,980+ vistas
skovmand pregunta,

¿hay equivalente a $scope.emit() o $scope.broadcast() en Angular?

Conozco la funcionalidad de EventEmitter , pero según lo entiendo yo, eso emite un evento al elemento HTML padre.

¿Qué pasa si necesito comunicarme entre elementos al misno nivel (siblings) o entre un componente en la raíz del DOM y un elemento anidado a varios niveles de profundidad?

pixelbits contesta, (304+ votos)

No hay equivalente a $scope.emit() o $scope.broadcast() de AngularJS. EventEmitter dentro de un componente es bastante parecido, pero como tu dices, solamente emite al elemento padre inmediato.

En Angular, hay otras alternativas que trato de explicar abajo.

Los enlaces con @Input() permiten que el modelo de aplicación se conecte en un elemento gráfico (raíz a hojas). El comportamiento por defecto de un detector de cambios de un componente es propagar todos los cambios a un modelo de la aplicación para todos los enlaces desde cualquier componente conectado.

Aclarando: Hay dos tipos de modelos: View Models (vista) y Application Models (aplicación). Uno de aplicación se conecta con enlaces @Input(). Uno de view  (vista) es una propiedad de componente (no decorado con @Input()) que está enlazado en la plantilla del componente.

Contestando a tus preguntas:

¿Qué pasa si necesito comunicarme entre componentes hermanos?

1. Application Model Compartido: Los hermanos pueden comunicarse a través de un modelo de aplicación compartida (al igual que angular 1). Por ejemplo, cuando un hermano realiza un cambio en un modelo, el otro hermano que tiene enlaces al mismo modelo se actualiza automáticamente.
2. Eventos de Componente: Los componentes hijos pueden emitir un evento al componente padre mediante enlaces @Output(). El componente principal puede manejar el evento y manipular el modelo de aplicación o su propio modelo de vista. Cambios a un Application Model se propagan automáticamente a todos los componentes que se unen directa o indirectamente al mismo modelo.
3. Eventos de Servicio: Los componentes pueden suscribirse a eventos de servicio. Por ejemplo, dos componentes hermanos pueden suscribirse al mismo evento de servicio y responder modificando sus respectivos modelos. Más sobre esto a continuación.

¿Cómo puedo comunicarme entre un componente raíz y un componente anidado a varios niveles de profundidad?

1. Application Model Compartido: El modelo de aplicación se puede pasar del componente raíz a subcomponentes profundamente anidados a través de enlaces @Input(). Los cambios en un modelo desde cualquier componente se propagarán automáticamente a todos los componentes que comparten el mismo modelo.
2. Eventos de Servicio: También puede mover EventEmitter a un servicio compartido, lo que permite que cualquier componente inyecte el servicio y se suscriba al evento. De esa forma, un componente Root puede llamar a un método de servicio (normalmente mutando el modelo), que a su vez emite un evento. Varios niveles más abajo, un componente secundario que también inyectó el servicio y se suscribió al mismo evento, puede manejarlo. Cualquier controlador de eventos que cambie un Application Model compartido, se propagará automáticamente a todos los componentes que dependen de él. Esto debe ser lo más parecido a $scope.broadcast() de Angular 1. La siguiente sección describe esta idea con más detalle.

Ejemplo de un servicio Observable que usa eventos de servicio para propagar los cambios

Cuando se añade un ElementoPendiente, el servicio notifica a sus suscriptores.

export class ElementoPendiente {
    constructor(public nombre: string, public hecho: boolean) {
    }
}
export class ServicioPendiente {
    public elementosAnadidos$: EventEmitter<ElementoPendiente>;
    private pendienteLista: ElementoPendiente[] = [];
    
    constructor() {
        this.elementosAnadidos$ = new EventEmitter();
    }
    
    public lista(): ElementoPendiente[] {
        return this.pendienteLista;
    }
    
    public anadir(elem: ElementoPendiente): void {
        this.pendienteLista.push(elem);
        this.elementosAnadidos$.emit(elem);
    }
}

Un elemento en la raíz se suscribiría de esta forma:

export class RaizComponent {
    private elementoAnadido: ElementoPendiente;
    constructor(servicioPendiente: ServicioPendiente) {
        servicioPendiente.elementosAnadidos$.subscribe(elem => this.onElementoAnadido(elem));
    }
    
    private onElementoAnadido(elem: ElementoPendiente): void {
        // haz algo con el elemento anandido
        this.elementoAnadido = elem;
    }
}

Un elemento hijo unos cuantos niveles más abajo se suscribiría así:

export class NietoComponent {
    private elemementoAnadido: ElementoPendiente;
    constructor(servicioPendiente: ServicioPendiente) {
        servicioPendiente.elementosAnadidos$.subscribe(elem => this.onElementoAnadido(elem));
    }
    
    private onElementoAnadido(elem: ElementoPendiente): void {
        // haz algo con el elemento anadido
        this.elemementoAnadido = elem;
    }
}

Este es el componente que llama al servicio para lanzar el evento (puede estar en cualquier sitio del componente):

@Component({
    selector: 'lista-pendiente',
    template: `
         <ul>
            <li *ngFor="#item of modelo"> {{ item.nombre }}
            </li>
         </ul>
        <br />
        Anadir elemento <input type="text" #txt /> <button (click)="anadir(txt.value); txt.value='';">Anadir</button>
    `
})
export class TriggeringComponent{
    private modelo: ElementoPendiente[];
    
    constructor(private servicioPendiente: ServicioPendiente) {
        this.modelo = servicioPendiente.lista();
    }
    
    anadir(value: string) {
        this.servicioPendiente.add(new ElementoPendiente(value, false));
    }
}

Source
Top

¿Cuales son algunas diferencias entre SystemJS y Webpack?

155+ votos? 60,183+ vistas
smartmouse pregunta,

Estoy creando mi primera aplicación de Angular y me pregunto por qué necesitamos los cargadores de módulos. He intentando encontrarlo en Google y no entiendo por qué hay que instalar uno de ellos para correr la aplicación.

¿No sería suficiente usar  import para cargar cosas de los módulos de node?

He encontrado este ejemplo en un tutorial de Angular (que usa SystemJS) y me hace usar el fichero systemjs.config.js :

/**
 * configuracion para ejemplos
 * ajustar como sea necesario para tu aplicacion
 */
(function(global) {
  // map le dice al System Loader donde buscar
  var map = {
    'app':                        'transpiled', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages le dice al System loader como cargar cuando no hay nombre de fichero y/o extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // ficheros individuales (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // empaquetados (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // la mayoria de entornos deberian usar UMD; algunos (Karma) necesitan los ficheros individuales
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Anadir para los paquetes de Angular
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

¿Por qué necesitamos este archivo de configuración?
¿Por qué necesitamos SystemJS (o WebPack u otras)?
Finalmente, en tu opinión, ¿qué es mejor?

Thierry Templier contesta, (97+ votos)

Si vas a la página de GitHub de SystemJS, verás la descripción de la herramienta:

Universal dynamic module loader - carga ES6 modules, AMD, CommonJS y global scripts en el navegador y NodeJS.

Como usas módulos en TypeScript o ES6,  necesitas el cargador de módulos. En el caso de SystemJS,  systemjs.config.js nos permite configurar la forma en que se emparejan los nombres de los módulos con sus archivos correspondientes.

Este archivo de configuración (y SystemJS) es necesario si quieres importar el módulo principal de su aplicación explícitamente:

<script>
  System.import('app').catch(function(err){ console.error(err); });
</script>

Cuando usas TypeScript, y configuras el compilador para el módulo commonjs module, el compilador crea código que ya no esta basado en SystemJS. En este ejemplo, el compilador de TypeScript sería así:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs", // <------
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

Webpack es un empaquetador de módulos flexible. Esto quiere decir que llega más lejos y no solamente se ocupa de módulos, también proporciona una manera de empaquetar tu aplicación (concat files, uglify files, …). También proporciona un servidor de desarrolo con carga recarga para el desarrollo.

SystemJS y Webpack son diferentes pero con SystemJS, te queda más trabajo por hacer (con Gulp o SystemJS builder por ejemplo) para empaquetar tu aplicación de Angular2 para producción.

Source
Top

Angular: Can’t find Promise, Map, Set and Iterator (No se puede encontrar Promise, Map, Set y Iterator)

154+ votos? 90,201+ vistas
Stav Alfi pregunta,

Después de instalar Angular, el compilador de Typescript me da errores de que no encuentra  Promise, Map, Set y Iterator.

Hasta ahora los he ignorado pero ahora necesito que Promise funcione.

import {Component} from 'angular2/core';
@Component({
    selector: 'saludos-cmp',
    template: `<div>{{ asyncSaludos | async}}</div>`
})
export class SaludosCmp {
    asyncSaludos: Promise<string> = new Promise(resolve => {
// despues de 1 segundo, la promise resuelve
        window.setTimeout(() => resolve('hola'), 1000);
    });
}

informacion adicional:
npm -v is 2.14.12
node -v is v4.3.1
typescript v is 1.6

The errors:

................ERROS OF MY CODE.................
    C:\Users\armyTik\Desktop\angular2\greeting_cmp.ts
    Error:(7, 20) TS2304: Cannot find name 'Promise'.
    Error:(7, 42) TS2304: Cannot find name 'Promise'.
    .........................................
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\platform\browser.d.ts
    Error:(77, 90) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\core\application_ref.d.ts
    Error:(83, 60) TS2304: Cannot find name 'Promise'.
    Error:(83, 146) TS2304: Cannot find name 'Promise'.
    Error:(96, 51) TS2304: Cannot find name 'Promise'.
    Error:(96, 147) TS2304: Cannot find name 'Promise'.
    Error:(133, 90) TS2304: Cannot find name 'Promise'.
    Error:(171, 81) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\core\change_detection\parser\locals.d.ts
    Error:(3, 14) TS2304: Cannot find name 'Map'.
    Error:(4, 42) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\core\debug\debug_node.d.ts
    Error:(14, 13) TS2304: Cannot find name 'Map'.
    Error:(24, 17) TS2304: Cannot find name 'Map'.
    Error:(25, 17) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\core\di\provider.d.ts
    Error:(436, 103) TS2304: Cannot find name 'Map'.
    Error:(436, 135) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\core\linker\compiler.d.ts
    Error:(12, 50) TS2304: Cannot find name 'Promise'.
    Error:(16, 41) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\core\linker\dynamic_component_loader.d.ts
    Error:(108, 136) TS2304: Cannot find name 'Promise'.
    Error:(156, 150) TS2304: Cannot find name 'Promise'.
    Error:(197, 128) TS2304: Cannot find name 'Promise'.
    Error:(203, 127) TS2304: Cannot find name 'Promise'.
    Error:(204, 141) TS2304: Cannot find name 'Promise'.
    Error:(205, 119) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\core\render\api.d.ts
    Error:(13, 13) TS2304: Cannot find name 'Map'.
    Error:(14, 84) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\facade\async.d.ts
    Error:(27, 33) TS2304: Cannot find name 'Promise'.
    Error:(28, 45) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\facade\collection.d.ts
    Error:(1, 25) TS2304: Cannot find name 'MapConstructor'.
    Error:(2, 25) TS2304: Cannot find name 'SetConstructor'.
    Error:(4, 27) TS2304: Cannot find name 'Map'.
    Error:(4, 39) TS2304: Cannot find name 'Map'.
    Error:(7, 9) TS2304: Cannot find name 'Map'.
    Error:(8, 30) TS2304: Cannot find name 'Map'.
    Error:(11, 43) TS2304: Cannot find name 'Map'.
    Error:(12, 27) TS2304: Cannot find name 'Map'.
    Error:(14, 23) TS2304: Cannot find name 'Map'.
    Error:(15, 25) TS2304: Cannot find name 'Map'.
    Error:(95, 41) TS2304: Cannot find name 'Set'.
    Error:(96, 22) TS2304: Cannot find name 'Set'.
    Error:(97, 25) TS2304: Cannot find name 'Set'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\facade\lang.d.ts
    Error:(13, 17) TS2304: Cannot find name 'Map'.
    Error:(14, 17) TS2304: Cannot find name 'Set'.
    Error:(78, 59) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\facade\promise.d.ts
    Error:(2, 14) TS2304: Cannot find name 'Promise'.
    Error:(7, 32) TS2304: Cannot find name 'Promise'.
    Error:(8, 38) TS2304: Cannot find name 'Promise'.
    Error:(9, 35) TS2304: Cannot find name 'Promise'.
    Error:(9, 93) TS2304: Cannot find name 'Promise'.
    Error:(10, 34) TS2304: Cannot find name 'Promise'.
    Error:(11, 32) TS2304: Cannot find name 'Promise'.
    Error:(11, 149) TS2304: Cannot find name 'Promise'.
    Error:(12, 43) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\http\headers.d.ts
    Error:(43, 59) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\http\url_search_params.d.ts
    Error:(11, 16) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\platform\browser\browser_adapter.d.ts
    Error:(75, 33) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\angular2\src\platform\dom\dom_adapter.d.ts
    Error:(85, 42) TS2304: Cannot find name 'Map'.
    C:\Users\armyTik\Desktop\angular2\node_modules\rxjs\CoreOperators.d.ts
    Error:(35, 67) TS2304: Cannot find name 'Promise'.
    Error:(50, 66) TS2304: Cannot find name 'Promise'.
    Error:(89, 67) TS2304: Cannot find name 'Promise'.
    Error:(94, 38) TS2304: Cannot find name 'Promise'.
    Error:(94, 50) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\rxjs\Observable.d.ts
    Error:(46, 62) TS2304: Cannot find name 'Promise'.
    Error:(47, 42) TS2304: Cannot find name 'Iterator'.
    Error:(103, 74) TS2304: Cannot find name 'Promise'.
    Error:(103, 84) TS2304: Cannot find name 'Promise'.
    Error:(143, 66) TS2304: Cannot find name 'Promise'.
    Error:(158, 65) TS2304: Cannot find name 'Promise'.
    Error:(201, 66) TS2304: Cannot find name 'Promise'.
    Error:(206, 38) TS2304: Cannot find name 'Promise'.
    Error:(206, 50) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\rxjs\observable\ForkJoinObservable.d.ts
    Error:(6, 50) TS2304: Cannot find name 'Promise'.
    Error:(7, 58) TS2304: Cannot find name 'Promise'.
    C:\Users\armyTik\Desktop\angular2\node_modules\rxjs\observable\FromObservable.d.ts
    Error:(7, 38) TS2304: Cannot find name 'Promise'.
    Error:(7, 51) TS2304: Cannot find name 'Iterator'.
    C:\Users\armyTik\Desktop\angular2\node_modules\rxjs\observable\PromiseObservable.d.ts
    Error:(9, 31) TS2304: Cannot find name 'Promise'.
    Error:(10, 26) TS2304: Cannot find name 'Promise'.

Kris Hollenbeck contesta, (162+ votos)

Angular RC4 — Angular ^2.0.0 con Typescript 2.0.0

Actualizado 9/19/2016

Para hacer que esto funcione con typescript 2.0.0, he hecho esto.

npm install --save-dev @types/core-js

tsconfig.json

"compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ],
    "types": [
      "core-js"
    ]
  }

Más sobre @types con typescript 2.0.0.

1. https://www.npmjs.com/~types

Ejemplo de Install:

npm install --save-dev @types/core-js

Errores de identificador duplicados

Esto seguramente es porque los ecmascript 6 typings ya están siendo importados desde algún otro sitio, posiblemente un versión vieja de es6-shim.

Verifica typings.d.ts y asegúrate de que no hay referencias a es6. Quita cualquier referencia a  es6 de tu directorio de typings si tienes uno.

Por ejemplo:

Esto tendrá un conflicto con types:['core-js'] en typings.json.

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332" 
    // es6-shim tambien tendra conflicto
  }
}

core-js en el arreglo de types en tsconfig.json debería ser el único sitio de donde se importa.

Angular CLI 1.0.0-beta.30

Si usas Angular-CLI, quita el arreglo lib en typings.json. Esto parece que tiene un conflicto con declarar core-js en types.

"compilerOptions" : {
  ...
  // eleminado "lib": ["es6", dom"],
  ...
},
"types" : ["core-js"]

Usuarios de Webstorm/Intellij con Angular CLI

Asegúrate de que el compilador TypeScript incorporado esté deshabilitado. Esto entrará en conflicto con la CLI. Para compilar tu typescript con el CLI puedes configurar como ng serve .

Tsconfig compilerOptions lib vs types

Si prefieres no instalar definiciones de core js type hay librerias de es6 que vienen incluidas con typescript. Se usan via la propiedad lib: [] en tsconfig.

Nota: Si --lib no se especifica se inyecta una librería por defecto. Esta libraría inyectada es: ? For --target ES5: DOM,ES5,ScriptHost ? For --target ES6: DOM,ES6,DOM.Iterable,ScriptHost

tl;dr

Brevemente:  "lib": [ "es6", "dom" ] o "types": ["core-js"] se pueden usar para resolver can't find Promise,Map, Set and Iterator. Sin embargo, usar ambos causará errores de identificador duplicado.

Source
Top

¿Cómo se detecta cuando cambia un valor de @Input() en Angular?

154+ votos? 89,893+ vistas
Jon Catmull pregunta,

Tengo un componente padre (CategoriaComponent), un componente hijo (videoListComponent) y un ApiService.

Casi todo funciona i.e. todos los componentes pueden acceder a la API de JSON y obtener los datos relevantes para sus observables.

Ahora mismo videoListComponent obtiene todos los videos, me gustaría filtrar los videos basados en su categoría, y lo consigo pasando el ID categoriaId al hijo con  @Input().

CategoriaComponent.html

<video-list *ngIf="categoria" [categoriaId]="categoria.id"></video-list>

Esto funciona y cuando la categoría del padre CategoriaComponent cambia, el  valor de categoriaId se pasa con @Input() pero necesito detectar esto en VideoListComponent y volver a pedir (re-request) el arreglo con los videos via APIService (con el nuevo categoriaId).

En AngularJS habría usado $watch en la variable. ¿Cuál es la mejor manera de manejar esto?

Alan C. S. contesta, (181+ votos)

En realidad, hay dos formas de detectar y actuar cuando un input cambia en el componente hijo en angular2+ :

1. Puedes usar ngOnChanges() como se menciona en respuestas anteriores:
   @Input() categoriaId: string; ngOnChanges(cambios: SimpleChanges) { this.hazAlgo(cambios.categoriaId.currentValue); // también puedes usar categoriaId.previousValue y // categoriaId.firstChange para comparar los valores nuevos y viejos }
2. Ejemplo: Mira en plunker
3. Además, puedes usar @Input así:
   private _categoriaId: string; @Input() set categoriaId(value: string) { this._categoriaId = value; this.hazAlgo(this._categoriaId); } obtenerCategoriaId(): string { return this._categoriaId; }
4. Ejemplo: Mira en plunker.

¿QUÉ ENFOQUE SE DEBE UTILIZAR?

Si tu componente tiene varios inputs, si usas ngOnChanges(), te llegarán todos los cambios de todos los inputs a la vez en ngOnChanges(). Con este enfoque, también puedes comparar los valores actual y anterior del input que ha cambiado y actuar en consecuencia.

Sin embargo, si quieres hacer algo cuando ha cambiado un input en particular   (y los otros inputs no te importan), puede ser más sencillo usar un @Input. Sin embargo, este enfoque no te permite  comparar valores actuales y anteriores del input que ha cambiado (lo cual es fácil con ngOnChanges).

EDITADO 2017–07–25: LA DETECCIÓN DE CAMBIO DE ANGULAR PUEDE NO DISPARARSE EN ALGUNAS CIRCUNSTANCIAS

Normalmente, la detección de cambio con @Input y ngOnChanges se dispara cuando el componente padre cambia los datos y los pasa al hijo, siempre que los datos sean de un tipo primitivo de JS (string, number, boolean). Sin embargo, en los siguientes escenarios, no se disparará y tienes que hacer trabajo extra para que funcione.

1. Si estás usando un objeto anidado o un arreglo (en lugar de un tipo primitivo de JS) para pasar los datos del padre al hijo, la detección de cambio (usando @Input o  ngOnchanges) puede que no se dispare, como se menciona en la respuesta de muetzerich. Para soluciones mira aquí.
2. Si estás mutando datos fuera del contexto de Angular (i.e., externamente), Angular no sabe que ha habido cambios. Tendrías que usar ChangeDetectorRef o NgZone en tu componente para hacer que Angular sepa que ha habido cambios y se dispare la detección de cambios. Mira aquí.

Source
Top

¿Cómo se pasan argumentos url (query string) a una solicitud (request) de HTTP en Angular?

154+ votos? 157,619+ vistas
Miguel Lattuada pregunta,

Hola,estoy creando una solicitud de HTTP en Angular, pero no sé como anadirle argumentos de URL (cadena de consulta (query)).

this.http.get(StaticSettings.BASE_URL).subscribe(
  (response) => this.onObtenTiempoResultados(response.json()),
  (error) => this.onObtenTiempoError(error.json()),
  () => this.onObtenTiempoCompleto()
);

Mi StaticSettings.BASE_URL es como una url sin parametros: http://enalgunsitio.com/ pero quiero que sea http://enalgunsitio.com/?var1=val1&var2=val2

Donde var1, y var2 son parte del objeto de la solicitud de HTTP? Quiero añadirlos como en un objeto.

{
  query: {
    var1: val1,
    var2: val2
  }
}

y que el módulo de Http haga el trabajo de analizar y descomponer para pasarlo a la cadena de consulta (query) de la URL.

toskv contesta, (216+ votos)

El método HttpClient permite configurar params en sus opciones.

Puedes configurarlo importando HttpClientModule del paquete @angular/common/http.

import {HttpClientModule} from '@angular/common/http';

@NgModule({
  imports: [ BrowserModule, HttpClientModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Luego puedes inyectar HttpClient y usarlo en la solicitud.

import {HttpClient} from '@angular/common/http'

import {HttpClient} from '@angular/common/http'

@Component({
  selector: 'mi-app',
  template: `
    <div>
      <h2>Hola {{nombre}}</h2>
    </div>
  `,
})
export class App {
  nombre:string;
  constructor(private httpClient: HttpClient) {
    this.httpClient.get('/url', {
      params: {
        appid: 'id1234',
        cnt: '5'
      },
      observe: 'response'
    })
    .toPromise()
    .then(response => {
      console.log(response);
    })
    .catch(console.log);
  }
}

Tienes un ejemplo aquí.

Para versiones de Angular anteriores a la versión 4 puedes hacer lo mismo con el servicio Http.

El método Http.get toma un objeto que implementa RequestOptionsArgs como un segundo parametro.

El campo search de ese objeto se puede usar para poner una cadena o un objeto URLSearchParams.

Ejemplo:

// Parameters obj-
 let params: URLSearchParams = new URLSearchParams();
 params.set('appid', StaticSettings.API_KEY);
 params.set('cnt', days.toString());
 
 //Http request-
 return this.http.get(StaticSettings.BASE_URL, {
   search: params
 }).subscribe(
   (response) => this.onObtenTiempoResultado(response.json()), 
   (error) => this.onObtenerTIempoError(error.json()), 
   () => this.onObtenerTiempoCompleto()
 );

Source
Top

¿Cómo se despliegan las aplicaciones de Angular?

153+ votos? 89,991+ vistas
Joseph Assem Sobhy pregunta,

¿Cómo se despliegan las aplicaciones de Angular para producción?

Todas las guías que he visto hasta ahora  cuentan con un servidor lite-server para servir y browserSync para reflejar los cambios — pero cuando acabas con el desarrollo ,¿Cómo se publica la aplicación?

Importo todos los ficheros .js compilados en index.html o los "minify" con gulp? ¿funcionará? ¿Necesito SystemJS en la versión de producción?

Amid contesta, (74+ votos)

Estás haciendo dos preguntas a la vez. La primera es como alojar tu aplicación. Y como dice @toskv es una pregunta demasiado amplia como para poderla contestar y depende de muchas cosas. La segunda es más especifica — cómo preparas la versión para el despliegue . Tienes varias opciones:

1. Despliegala tal cual está. No minificación, concatenación, cambios de nombres etc. Transcompila todo tu proyecto, copia todos los js/css/… resultantes + dependencias al servidor que alojará tu aplicación y ya lo tienes.
2. Despliega usando herramientas especificas. Como webpack o systemjs builder. Incluyen todas las posibilidades que faltan en #1. Puedes empaquetar todo tu código en un par de ficheros js/css/… a los que haces referencia en tu HTML. Systemjs buider incluso te permite no tener que incluir systemjs como parte del paquete de despliegue.

Sí, lo más probable es que necesites implementar systemjs y muchas otras libraries externas como parte de tu paquete. Y sí que podrás ponerlas en un par de ficheros js a los que hagas referencia en tu HTML. No tienes que referenciar todos tus ficheros js compilados desde la página — systemjs como cargador de módulos se encarga de eso.

Sé que suena lioso— para ayudarte a comenzar con #2 aquí van dos ejemplos sencillos:

SystemJS builder: angular2 seed

WebPack: angular2 webpack starter

Mira como lo hacen — y, con suerte, esto te ayudará a encontrar la forma de agrupar las aplicaciones que crees.

Source
Top

ngFor con index como un atributo con un valor

149+ votos ? 195,294+ vistas
Vivendi pregunta,

Tengo un bucle ngFor sencillo que realiza un seguimiento  index actual. Quiero guardar el valor de ese index en un atributo para poder imprimirlo. Pero no sé como se hace.

Tengo esto:

<ul *ngFor="#elemento of elementos; #i = index" data-index="#i">
    <li>{{elemento}}</li>
</ul>

Quiero guardar el valor #i en el atributo data-index. He probado varias formas pero ninguna me funciona.

Tengo una demo aquí: http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview

¿Cómo puedo almacenar el valor de index en el atributo data-index ?

Thierry Templier contesta, (284+ votos)

Yo usaría esta sintaxis para establecer el valor del índice en un atributo del elemento HTML:

<ul>
    <li *ngFor="#elemento of elementos; #i = index" [attr.data-index]="i">
        {{elemento}}
    </li>
</ul>

Aquí está el ejemplo con los cambios: http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview.

Actualizado para los lanzamientos de angular 2 Debes usar let en lugar de  #.

<ul>
    <li *ngFor="let elemento of elementos; let i = index" [attr.data-index]="i">
        {{item}}
    </li>
</ul>

Source
Top

Define constantes globales en Angular 2

149+ votos? 128,101+ vistas
AndreFeijo pregunta,

En Angular 1.x puedes definir constantes así:

angular.module('mainApp.config', [])
.constant('API_ENDPOINT', 'http://127.0.0.1:6666/api/')

¿Cuál sería el equivalente en Angular2 (con Typescript)? No quiero repetir la url base de la API una y otra vez en mis servicios.

AndreFeijo contesta, (159+ votos)

Estos cambios a mi me funcionan en la versión final de Angular 2:

export class AppSettings {
   public static API_ENDPOINT='http://127.0.0.1:6666/api/';
}

Y en el servicio:

import {Http} from 'angular2/http';
import {Message} from '../models/message';
import {Injectable} from 'angular2/core';
import {Observable} from 'rxjs/Observable';
import {AppSettings} from '../appSettings';
import 'rxjs/add/operator/map';

@Injectable()
export class MensajeServicio {

    constructor(private http: Http) { }
    
    obtenerMensajes(): Observable<Message[]> {
        return this.http.get(AppSettings.API_ENDPOINT+'/messages')
            .map(response => response.json())
            .map((messages: Object[]) => {
                return messages.map(message => this.parseData(message));
            });
    }
    
    private parseData(data): Message {
        return new Message(data);
    }
}

Source
Top

Angular — Usar pipes en servicios y componentes

148+ votos? 75,716+ vistas
POSIX-compliant pregunta,

En AngularJS, puedo usar filtros (pipes) dentro de los servicios y controllers usando algo como esto:

$filter('date')(miFecha, 'yyyy-MM-dd');

¿se puede hacer lo mismo en Angular?

cexbrayat contesta, (271+ votos)

Como siempre, en Angular, puedes confiar en la inyección de dependencia:

import { DatePipe } from '@angular/common';
class MiServicio {

  constructor(private fechaPipe: DatePipe) {}
  
  transformaFecha(fecha) {
    this.fechaPipe.transform(miFecha, 'yyyy-MM-dd');
  }
}

Añade DatePipe a tu lista de proveedores en tu módulo; Si se te olvida te da un error  no provider for DatePipe:

providers: [DatePipe,...]

Ten en cuenta que  DatePipe dependía de la Intl API hasta la versión 5, que no es compatible con todos los navegadores (comprueba la compatibilidad).

Si estás usando una versión de Angular más antigua, debes añadir  Intl polyfill a tu proyecto para evitar problemas.

Source
Top

Excepción en Angular2: Can’t bind to ‘routerLink’ since it isn’t a known native property (No se puede enlazar con 'routerLink' porque no es una propiedad nativa conocida.

144+ votos? 83,326+ vistas
Lester Burnham pregunta,

Obviamente la versión beta de Angular2 es muy nueva, así que no hay mucha información disponible, pero estoy intentando hacer algo que yo creo es básico en enrutamiento (routing).

Hackeando con el código de inicio rápido y otros fragmentos de la página de https://angular.io he hecho esta estructura:

angular-testapp/
    app/
        app.component.ts
        boot.ts
        routing-test.component.ts
    index.html

Con los ficheros así:

index.html

<html>

  <head>
    <base href="/">
    <title>Angular 2 QuickStart</title>
    <link href="../css/bootstrap.css" rel="stylesheet">
    
    <!-- 1. cargar librerias - libraries -->
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    
    <!-- 2. Configurar SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>
    
  </head>
  
  <!-- 3. Mostrar la aplicacion -->
  <body>
    <my-app>Cargando...</my-app>
  </body>
  
</html>

boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {ROUTER_PROVIDERS} from 'angular2/router';

import {AppComponent} from './app.component'

bootstrap(AppComponent, [
    ROUTER_PROVIDERS
]);

app.component.ts

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';

import {RoutingTestComponent} from './routing-test.component';

@Component({
    selector: 'mi-app',
    template: `
        <h1>Componente Router</h1>
        <a [routerLink]="['RoutingTest']">Test de enrutamiento/Routing</a>
        <router-outlet></router-outlet>
        `
})

@RouteConfig([
    {path:'/routing-test', name: 'RoutingTest', component: RoutingTestComponent, useAsDefault: true},
])

export class AppComponent { }

routing-test.component.ts

import {Component} from 'angular2/core';
import {Router} from 'angular2/router';

@Component({
    template: `
        <h2>Test de enrutamiento/routing</h2>
        <p>Algo interesante aquí!</p>
        `
})
export class RoutingTestComponent { }

Pero cuando intento correr la aplicación me da:

EXCEPTION: Template parse errors:
Can't bind to 'routerLink' since it isn't a known native property ("
        <h1>Componente Router</h1>
        <a [ERROR ->][routerLink]="['RoutingTest']">Test de enrutamiento</a>
        <router-outlet></router-outlet>
        "): AppComponent@2:11

He encontrado un problema parecido; router-link directives broken after upgrading to angular2.0.0-beta.0. Pero, el “ejemplo que funciona” en una de las respuestas basadas en código pre-beta —que bien puede funcionar, pero me gustaría saber por qué el código que he creado no funciona.

¡Cualquier sugerencia sería recibida con gratitud!

Günter Zöchbauer contesta, (220+ votos)

>=RC.5

Importa RouterModule

@NgModule({ 
  imports: [RouterModule],
  ...
})

>=RC.2

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';

export const routes: RouterConfig = [
  ...
];

export const APP_ROUTER_PROVIDERS = [provideRouter(routes)];

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { APP_ROUTER_PROVIDERS } from './app.routes';

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);

<=RC.1

A tu código le falta

@Component({
    ...
    directives: [ROUTER_DIRECTIVES],
    ...)}

No puedes usar directives como routerLink o router-outlet sin darlas a conocer a tu componente.

Aunque los nombres de las directives se cambiaron para distinguir entre mayúsculas y minúsculas en Angular2, los elementos siguen usando - en el nombre, como <router-outlet> para ser compatibles con las especificaciones de componentes web que requieren un - en el nombre de elementos personalizados.

Registra globalmente

Para que ROUTER_DIRECTIVES este disponible globalmente, añade este provider a bootstrap(...):

provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi: true})

Entonces ya no necesitas añadir ROUTER_DIRECTIVES a cada componente.

Source
Top

Angular: 2 pestañas dinámicas con componentes seleccionados por el usuario por click.

143+ votos? 80,735+ vistas
Cuel pregunta,

Estoy intentando configurar un sistema de pestañas que permita a componentes registrarse a sí mismos (con un título). La primera pertaña es como una bandeja de entrada, hay muchos elementos de acciones/enlaces, y cada uno de estos clicks debe instanciar un componente nuevo, en el click. Las acciones / enlaces vienen de JSON.

El componente instanciado se registrará a si mismo como una nueva pestaña.

No sé si esta es la mejor manera de hacer esto. Por ahora las guías que he visto son para pestañas estáticas, lo cual no ayuda.

Por ahora solamente tengo el servicio para las pestañas que está en main para persistir por toda la app, es más o menos como esto.

export interface ITab { titulo: string; }

@Injectable()
export class PestanaServicio {
    private pestanas = new Set<ITab>();
    
    anadirPestana(titulo: string): ITab {
        let pestana: ITab = { titulo };
        this.pestanas.add(pestana);
        return pestana;
    }
    
    quitarPestana(pestana: ITab) {
        this.pestanas.delete(pestana);
    }
}

Preguntas:

1)¿Cómo puedo tener una lista dinámica en la bandeja de entrada que cree nuevas pestañas (diferentes)? Me imagino que con DynamicComponentBuilder?

2) ¿Cómo pueden los componentes creados desde la bandeja de entrada (al hacer clic) registrarse como pestañas y también mostrarse? Supongo que con ng-content pero no puedo encontrar mucha información al respecto.

Editado: Para aclarar

Piensa en la bandeja de entrada como una bandeja de entrada de correo, los elementos se sacan de JSON y muestran varios elementos. Una vez que se hace clic en uno de los elementos, se crea una nueva pestaña con ‘type’. El tipo (type) es un componente.

Editado2: Image

http://i.imgur.com/yzfMOXJ.png

Günter Zöchbauer contesta, (190+ votos)

actualizado

ejemplo: Angular 5 StackBlitz

actualizado

ngComponentOutlet se añadio a 4.0.0-beta.3

actualizado

Hay un NgComponentOutlet que se está creando que hace algo similar https://github.com/angular/angular/pull/11235

RC.7

Ejemplo Plunker RC.7

// componente de ayuda para anadir nuevos componentes
@Component({
  selector: 'dcl-wrapper',
  template: `<div #target></div>`
})
export class DclWrapper {
  @ViewChild('target', {read: ViewContainerRef}) target: ViewContainerRef;
  @Input() tipo: Type<Component>;
  cmpRef: ComponentRef<Component>;
  private estaLaVistaInicializada:boolean = false;
  
  constructor(private componentFactoryResolver: ComponentFactoryResolver, private compiler: Compiler) {}
  
  actualizarComponente() {
    if(!this.estaLaVistaInicializada) {
      return;
    }
    if(this.cmpRef) {
      // cuando el `tipo` del input cambia destruimos uno
      //creado previamente antes de crear el nuevo     
      this.cmpRef.destroy();
    }
    
    let factory = this.componentFactoryResolver.resolveComponentFactory(this.tipo);
    this.cmpRef = this.target.createComponent(factory)
    // para acceder a la instancia creada
    // this.compRef.instance.unaPropiedad = 'unValor';
    // this.compRef.instance.unOutput.subscribe(val => hazAlgo());
  }
  
  ngOnChanges() {
    this.actualizarComponente();
  }
  
  ngAfterViewInit() {
    this.estaLaVistaInicializada = true;
    this.actualizarComponente();  
  }
  
  ngOnDestroy() {
    if(this.cmpRef) {
      this.cmpRef.destroy();
    }    
  }
}

ejemplo de uso

// Usq dcl-wrapper component
@Component({
  selector: 'mis-pestanas',
  template: `
  <h2>pestanas</h2>
  <div *ngFor="let pestana of pestanas">
    <dcl-wrapper [type]="tab"></dcl-wrapper>
  </div>
`
})
export class Pestanas {
  @Input() pestanas;
}

@Component({
  selector: 'mi-app',
  template: `
  <h2>Hola {{nombre}}</h2>
  <mis-pestanas [pestanas]="tipos"></mis-pestanas>
`
})
export class App {
  //la lista usada para crear las pestanas
  tipos = [C3, C1, C2, C3, C3, C1, C1];
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, DclWrapper, Tabs, C1, C2, C3],
  entryComponents: [C1, C2, C3],
  bootstrap: [ App ]
})
export class AppModule {}

versiones anteriores

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Esto cambio en Angular2 RC.5

Actualizaré el ejemplo de abajo pero es mi último día antes de las vacaciones.

Este ejemplo de Plunker demuestra como crear componentes de forma dinámica en RC.5

Actualizado— usa ViewContainerRef.createComponent()

Como DynamicComponentLoader es obsoleto, El enfoque se debe actualizar nuevamente.

@Component({
  selector: 'dcl-wrapper',
  template: `<div #target></div>`
})
export class DclWrapper {
  @ViewChild('target', {read: ViewContainerRef}) target;
  @Input() tipo;
  cmpRef:ComponentRef;
  private estaVistaInicializada:boolean = false;
  
  constructor(private resolver: ComponentResolver) {}
  
  actualizaComponente() {
    if(!this.estaVistaInicializada) {
      return;
    }
    if(this.cmpRef) {
      this.cmpRef.destroy();
    }
   this.resolver.resolveComponent(this.tipo).then((factory:ComponentFactory<any>) => {
      this.cmpRef = this.target.createComponent(factory)
      // para acceder a la instancia creada
      // this.compRef.instance.unaPropiedad = 'unValor';
      // this.compRef.instance.unOutput.subscribe(val => hazAlgo());
    });
  }
  
  ngOnChanges() {
    this.actualizaComponente();
  }
  
  ngAfterViewInit() {
    this.estaVistaInicializada = true;
    this.actualizaComponente();  
  }
  ngOnDestroy() {
    if(this.cmpRef) {
      this.cmpRef.destroy();
    }    
  }
}

Plunker ejemplo RC.4
Plunker ejemplo beta.17

Actualizado— usa loadNextToLocation

export class DclWrapper {
  @ViewChild('target', {read: ViewContainerRef}) target;
  @Input() tipo;
  cmpRef:ComponentRef;
  private estaVistaInicializada:boolean = false;
  
  constructor(private dcl:DynamicComponentLoader) {}
  
  actualizaComponente() {
    // ejecuta cada vez que `tipo` cambia pero no antes de la llamada a  `//ngAfterViewInit()` se realiza 
    // para inicializar un `target` 
    if(!this.estaVistaInicializada) {
      return;
    }
    if(this.cmpRef) {
      this.cmpRef.destroy();
    }
    this.dcl.loadNextToLocation(this.tipo, this.target).then((cmpRef) => {
      this.cmpRef = cmpRef;
    });
  }
  
  ngOnChanges() {
    this.actualizaComponente();
  }
  
  ngAfterViewInit() {
    this.estaVistaInicializada = true;
    this.actualizaComponente();  
  }
  
  ngOnDestroy() {
    if(this.cmpRef) {
      this.cmpRef.destroy();
    }    
  }
}

Plunker ejemplo beta.17

original

No entiendo muy bien lo que necesitas pero creo que puede ser esto.

El componente Pestanas toma un arreglo de tipos (types) y crea pestañas (tabs) para cada elemento del arreglo.

@Component({
  selector: 'dcl-wrapper',
  template: `<div #target></div>`
})
export class DclWrapper {
  constructor(private elRef:ElementRef, private dcl:DynamicComponentLoader) {}
  @Input() tipo;
  
  ngOnChanges() {
    if(this.cmpRef) {
      this.cmpRef.dispose();
    }
    this.dcl.loadIntoLocation(this.tipo, this.elRef, 'target').then((cmpRef) => {
      this.cmpRef = cmpRef;
    });
  }
}

@Component({
  selector: 'c1',
  template: `<h2>c1</h2>`
  
})
export class C1 {
}

@Component({
  selector: 'c2',
  template: `<h2>c2</h2>`
})
export class C2 {
}
@Component({
  selector: 'c3',
  template: `<h2>c3</h2>`
  
})
export class C3 {
}

@Component({
  selector: 'mis-pestanas',
  directives: [DclWrapper],
  template: `
  <h2>Pestanas</h2>
  <div *ngFor="let pestana of pestanas">
    <dcl-wrapper [tipo]="pestana"></dcl-wrapper>
  </div>
`
})
export class Pestanas {
  @Input() pestanas;
}

@Component({
  selector: 'mi-app',
  directives: [Pestanas]
  template: `
  <h2>Hola {{nombre}}</h2>
  <mis-pestanas [pestanas]="tipos"></mis-pestanas>
`
})
export class App {
  types = [C3, C1, C2, C3, C3, C1, C1];
}

Plunker ejemplo beta.15 (no está basado en tu Plunker)

También hay una forma de pasar datos al componente creado dinámicamente como (unosDatos pasados como tipo)

this.dcl.loadIntoLocation(this.tipo, this.elRef, 'target').then((cmpRef) => {
  cmpRef.instance.unaPropiedad = unosDatos;
  this.cmpRef = cmpRef;
});

También hay algo de soporte para usar la inyección de dependencia con servicios compartidos.

Source
Top

Delegación: EventEmitter o Observable en Angular

141+ votos? 78,505+ vistas
the_critic pregunta,

Estoy tratando de implementar algo así como un patrón de delegación en Angular. Cuando el usuario hace click en nav-item, me gustaría llamar a una función que luego emita un evento que a su vez debe ser ser tratado por algún otro componente que está escuchando el evento.

El escenario: Tengo un componente Navigation:

import {Component, Output, EventEmitter} from 'angular2/core';

@Component({
    // otras propiedades que no incluyo
    events : ['navchange'], 
    template:`
      <div class="nav-item" (click)="elementoNavSeleccionado(1)"></div>
    `
})

export class Navigation {

    @Output() navchange: EventEmitter<number> = new EventEmitter();
    
    elementoNavSeleccionado(elem: number) {
        console.log('elemento nav seleccionado ' + elem);
        this.navchange.emit(elem)
    }
    
}

El componente que observa:

export class ObservadorComponent {

  // como observo ? 
  // <----------evento observe/register ?-------->
  
  public elementoNavSeleccionado(elem: number) {
    console.log('index del elemento cambiado!');
  }
  
}

La pregunta es, ¿Cómo hago que el componente observe el evento en cuestión?

Mark Rajcok contesta, (306+ votos)

Actualizado 2016–06–27: En lugar de usar Observables, usa uno de esto dos:

• un BehaviorSubject, recomendado por @Abdulrahman en un comentario, o
• un ReplaySubject, recomendado por @Jason Goemaat en un comentario

Un Subject es un Observable (así que nos podemos suscribir( subscribe() ) a él) y un observador (Observer) (así que podemos usar  next() para emitir un valor nuevo). Explotamos esta característica. Un Subject permite que los valores notifiquen a muchos observadores (Observers). No explotamos esta propiedad (solamente tenemos un Observer).

BehaviorSubject es una variante de Subject. Tiene noción del "valor actual". Explotamos esto: cuando creamos un ObservingComponent, obtiene el valor del elemento de navegación actual de BehaviorSubject automáticamente.

El código más abajo y en plunker usan BehaviorSubject.

ReplaySubject es otra variante de Subject. Si quieres esperar a que un valor sea producido, usa ReplaySubject(1). Mientras que BehaviorSubject requiere un valor inicial (que se proporcionará de inmediato), ReplaySubject no lo require. ReplaySubject siempre proporcionará el valor más reciente, pero como no require un valor inicial, el servicio puede hacer operaciones asíncronas antes de devolver su primer valor. Igualmente se disparará inmediatamente en llamadas posteriores con el valor más reciente. Si solamente quieres un valor, usa first() en la suscripción. Si usas first() no necesitas borrar la suscripción (unsubscribe).

import {Injectable}      from '@angular/core'
import {BehaviorSubject} from 'rxjs/BehaviorSubject';

@Injectable()
export class NavService {
  // elemento de navegacion Observable 
  private _navItemSource = new BehaviorSubject<number>(0);
  // elemento de navegacion observable - flujo
  navItem$ = this._navItemSource.asObservable();
  // comando de servicio
  changeNav(number) {
    this._navItemSource.next(number);
  }
}

import {Component}    from '@angular/core';
import {NavService}   from './nav.service';
import {Subscription} from 'rxjs/Subscription';

@Component({
  selector: 'obs-comp',
  template: `obs component, item: {{item}}`
})
export class ObservadorComponent {
  item: number;
  subscription:Subscription;
  constructor(private _navService:NavService) {}
  ngOnInit() {
    this.subscription = this._navService.navItem$
       .subscribe(item => this.item = item)
  }
  ngOnDestroy() {
    // evitar la fuga de memoria cuando se destruye el componente
    this.subscription.unsubscribe();
  }
}

@Component({
  selector: 'mi-nav',
  template:`
    <div class="nav-item" (click)="SeleccionadoNavItem(1)">nav 1 (clickeame)</div>
    <div class="nav-item" (click)="SeleccionadoNavItem(2)">nav 2 (clickeame)</div>`
})
export class Navigation {
  item = 1;
  constructor(private _navService:NavService) {}
  SeleccionadoNavItem(item: number) {
    console.log('elemento de nav seleccionado' + item);
    this._navService.changeNav(item);
  }
}

Plunker

Respuesta Original que usa un Observable: (require más lógica y código que BehaviorSubject, así que no lo recomiendo pero puede ser instructivo)

Esta implementación usa Observable en lugar de EventEmitter. A diferencia de mi implementacuión con EventEmitter, esta implementación también guarda el valor seleccionado actualmente ( navItem ) en el servicio, de modo que cuando se crea un componente de observación, puede recuperar el valor actual a través de una llamada API  navItem(), y es notificado de cambios con la Observable ( navChange$).

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/share';
import {Observer} from 'rxjs/Observer';

export class NavService {
  private _navItem = 0;
  navChange$: Observable<number>;
  private _observer: Observer;
  constructor() {
    this.navChange$ = new Observable(observer =>
      this._observer = observer).share();
    // share() permite varios suscriptores
  }
  changeNav(number) {
    this._navItem = number;
    this._observer.next(number);
  }
  navItem() {
    return this._navItem;
  }
}

@Component({
  selector: 'obs-comp',
  template: `obs component, item: {{item}}`
})
export class ObservadorgComponent {
  item: number;
  subscription: any;
  constructor(private _navService:NavService) {}
  ngOnInit() {
    this.item = this._navService.navItem();
    this.subscription = this._navService.navChange$.subscribe(
      item => this.elementoNavSeleccionado(item));
  }
  elementoNavSeleccionado(item: number) {
    this.item = item;
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

@Component({
  selector: 'mi-nav',
  template:`
    <div class="nav-item" (click)="elementoNavSeleccionado(1)">nav 1 (click me)</div>
    <div class="nav-item" (click)="elementoNavSeleccionado(2)">nav 2 (click me)</div>
  `,
})
export class Navigation {
  item:number;
  constructor(private _navService:NavService) {}
  elementoNavSeleccionado(item: number) {
    console.log('elemento nav seleccionado ' + item);
    this._navService.changeNav(item);
  }
}

Plunker

Source
Top

¿Cómo se añade bootstrap a un proyecto angular-cli?

140+ votos? 166,741+ vistas
Jerome pregunta,

Queremos usar bootstrap 4 (4.0.0-alpha.2) en nuestra app generada con angular-cli 1.0.0-beta.5 (w/ node v6.1.0).

Después de obtener bootstrap y sus dependencias con npm, nuestro primer intento consistió en agregarlos en angular-cli-build.js:

'bootstrap/dist/**/*.min.+(js|css)',  
  'jquery/dist/jquery.min.+(js|map)',  
  'tether/dist/**/*.min.+(js|css)',

e importarlos en index.html

<script src="vendor/jquery/dist/jquery.min.js"></script>
  <script src="vendor/tether/dist/js/tether.min.js"></script>
  <link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
  <script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

Esto funcionaba con ng serve pero en cuanto creamos la compilación (build) con -prod  dist/vendor todas las dependencias desaparecierón(sorpresa !).

¿Cómo debemos tratar tal escenario? (i.e. cargando los scripts de bootstrap en un proyecto generado con angular-cli ?

Habiamos pensado esto pero no sabemos bien por donde tirar…

• ¿usar un CDN ? pero preferimos servir estos archivos para garantizar que estarán disponibles
• ¿copiar dependencias a dist/vendor despues de nuestro ng build -prod ? ¿Pero eso parece algo que angular-cli debería proporcionar ya que 'se ocupa' de la parte de compilación?
• ¿añadir jquery, bootstrap y tether en src/system-config.ts y de alguna manera ponerlos en el paquete main.ts ? Pero eso parecía incorrecto considerando que no los vamos a usar explícitamente en el código de nuestra aplicación. (a diferencia de moment.js o algo como lodash, por ejemplo)

pd farhad contesta, (202+ votos)

**ACTUALIZACIÓN  IMPORTANTE: ng2-bootstrap ahora es ngx-bootstrap **

ngx-bootstrap funciona con angular 3 y 4.

Actualizado : 1.0.0-beta.11-webpack o posteriores

Primero compruebla tu versión de angular-cli con el siguiente comando en la terminal: ng -v

Si la versión es posterior a  1.0.0-beta.11-webpack sigue estos pasos:

1. instala ngx-bootstrap y bootstrap:
   npm install ngx-bootstrap bootstrap --save

Eso hoy por hoy installa bootstrap 3, pero puede instalar bootstrap 4 en el futuro. Ten en cuenta que ngx-bootstrap funciona con las dos versiones.

1. abre src/app/app.module.ts y añade
   import { AlertModule } from 'ngx-bootstrap'; ... @NgModule({ ... imports: [AlertModule.forRoot(), ... ], ... })
2. abre angular-cli.json e inserta una nueva entrada en el arreglo styles
   "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ],
3. abre src/app/app.component.html y añade
   <alert type="success">hola</alert>

1.0.0-beta.10 o anteriores:

Si tu versión de angular-cli version es 1.0.0-beta.10 o anterior tienes que usar estos pasos.

Vete al directorio del proyecto y escribe

npm install ngx-bootstrap --save

abre angular-cli-build.js y añade esto

vendorNpmFiles: [
   ..................
   'ngx-bootstrap/**/*.js',
    ....................
  ]

ahora abre src/system-config.ts, escribe

const map:any = {
     ..................
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
    ....................
}

y

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};

Source
Top

Acceso a key y value de un objecto que utiliza *ngFor

136+ votos? 139,816+ vistas
Pardeep Jain pregunta,

Tengo confusión sobre los objetos  Key y Value en angular2 usando *ngFor para las iteraciones sobre el objeto. Sé que en angular 1.x hay una sintaxis como esta:

ng-repeat="(key, value) in demo"

pero en angular2 eso no me funciona. He probado lo siguiente pero tampoco funciona.  Por favor decidme lo que estoy haciendo mal.

<ul>
  <li *ngFor='#key of demo'>{{key}}</li>
</ul>

demo = {
    'key1': [{'key11':'value11'}, {'key12':'value12'}],
    'key2': [{'key21':'value21'}, {'key22':'value22'}],
  }

Aquí está mi Plunker : http://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview

Quiero obtener  key1 y key2 dinamicamente con *ngFor. He encontrado una idea usando pipe pero no sé como hacerlo. ¿Hay alguna pipe en Angular 2 que me permita hacerlo?

Thierry Templier contesta, (134+ votos)

Puedes crear una pipe personalizada que devuelva la lista de keys para cada elemento.  Algo como esto:

import { PipeTransform, Pipe } from '@angular/core';

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push(key);
    }
    return keys;
  }
}

y la usas así:

<tr *ngFor="let c of contenido">           
  <td *ngFor="let key of c | keys">{{key}}: {{c[key]}}</td>
</tr>

Editado

También puedes devolver una entrada que contenga la key la la value:

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

y para usarla:

<span *ngFor="let c of contenido | keys">           
  Key: {{c.key}}, value: {{c.value}}
</span>

Source
Top

Excepción de Angular: Can’t bind to ‘ngFor’ since it isn’t a known native property (No se puede enlazar a 'ngFor' porque no es una propiedad nativa conocida).

134+ votos? 63,054+ vistas
Mark Rajcok pregunta,

¿Qué estoy haciendo mal?

import {bootstrap, Component} from 'angular2/angular2'

@Component({
  selector: 'conf-charlas',
  template: `<div *ngFor="charla of charlas">
     {{charla.titulo}} de {{charla.orador}}
     <p>{{charla.descripcion}}
   </div>`
})
class ConfCharlas {
  talks = [ {titulo: 't1', orador: 'Brian', descripcion: 'talk 1'},
            {titulo: 't2', orador: 'Julie', descripcion: 'talk 2'}];
}
@Component({
  selector: 'mi-app',
  directives: [ConfCharlas],
  template: '<conf-charlas></conf-charlas>'
})
class App {}
bootstrap(App, [])

El error:

EXCEPTION: Template parse errors:
Can't bind to 'ngFor' since it isn't a known native property
("<div [ERROR ->]*ngFor="charla of charlas">

Mark Rajcok contesta, (325+ votos)

Te falta let delante de  charla:

<div *ngFor="let charla of charlas">

Ten en cuenta que desde beta.17 la sintaxis con  #... para declarar variables locales en una directive estructural como NgFor se considera obsoleta. Usa let  en su lugar.
<div *ngFor="#charla of charlas"> ahora es <div *ngFor="let charla of charlas">

Respuesta original:

Te falta  # delante de  charla:

<div *ngFor="#charla of charlas">

Es muy fácil olvidarse de #. Me gustaría que el mensaje de Angular fuera:
se te ha olvidado # otra vez.

Source
Top

¿Cómo se añade font-awesome a un proyecto Angular 2 + CLI

132+ votos? 71,934+ vistas
Nik pregunta,

Estoy usando Angular 2+ y Angular CLI.

¿Cómo agrego font-awesome a mi proyecto?

AIon contesta, (285+ votos)

Desde el lanzamiento final de  Angular 2.0 , la estructura de un proyecto de Angular2 CLI ha cambiado — no necesitas ningunos ficheros de vendedores -no system.js — solamente webpack. Esto es lo que tienes que hacer:

1. npm install font-awesome --save
2. En el fichero angular-cli.json encuentra el arreglo styles[] y añade las referencias a font-awesome:
   “apps”: [ { “root”: “src”, “outDir”: “dist”, …. “styles”: [ “styles.css”, “../node_modules/bootstrap/dist/css/bootstrap.css”, “../node_modules/font-awesome/css/font-awesome.css” // -webpack creara un enlacel automaticamente a css con esto!? ], … } ] ]
3. Pon algunos iconos de font-awesome en cualquier fichero html que quieras:
   <i class=”fa fa-american-sign-language-interpreting fa-5x” aria-hidden=”true”> </i>
4. Corre ng build y ng serve otra vez - porque los observadores son solamente para la carpeta src y no se observan los cambios en angular-cli.json.
5. ¡Disfruta de tus impresionantes íconos!

Source
Top

Diferencia entre HTTP y HTTPClient en angular 4

130+ votos? 47,082+ vistas
Aioub Amini pregunta,

Quiero saber cuál usar para crear un servicio web simulado para probar el programa Angular.

AngularInDepth.com contesta, (208+ votos)

Usa la clase HttpClient de HttpClientModule si estás usando Angular 4.3.x a o posterior:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
 imports: [
   BrowserModule,
   HttpClientModule
 ],
 ...
 
 class MyService() {
    constructor(http: HttpClient) {...}

Es una versión mejorada del módulo http de @angular/http con estas mejoras:

• Los interceptores permiten que la lógica del middleware se inserte en la canalización (pipeline)
• Objetos de solicitud/respuesta inmutables
• Eventos de progreso para la carga de solicitudes y la descarga de respuestas
• Acceso tipado (typed) y síncrono al cuerpo (body) de la respuesta, incluyendo soporte para tipos de JSON
• JSON se asume y ya no necesitas analizarlo explícitamente
• Verificación Post-request & testeado del framework basado en vaciado (flush)

En el futuro, el antiguo http client quedará obsoleto.

También ten en cuenta que el antiguo http era inyectado con la clase  Http en lugar del nuevo HttpClient:

import { HttpModule } from '@angular/http';

@NgModule({
 imports: [
   BrowserModule,
   HttpModule
 ],
 ...
 
 class MiServicio() {
    constructor(http: Http) {...}

Además, el nuevo HttpClient parece necesitar tslib en runtime, así que tienes que instalarlo con npm i tslib y actualizar  system.config.js si estás usandoSystemJS:

map: {
     ...
    'tslib': 'npm:tslib/tslib.js',

Y necesitas agregar otro mapeo (mapping) si usas SystemJS:

'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',

Source
Top

Eso es todo por hoy. Si te ha resultado útil este artículo, ayúdame a compartirlo. ? ? ?

Sígueme en Medium o Twitter para leer más sobre Angular, webpack, typescript, nodejs y javascript! ? ? ?

En este tutorial, aprenderemos cómo instalar la interfaz de línea de comandos de Angular (Angular CLI) en el sistema operativo Windows y usarla para crear un nuevo proyecto Angular.

¿Qué es la interfaz de línea de comandos de Angular (Angular CLI)?

La Angular CLI es la herramienta oficial para inicializar y trabajar con proyectos de Angular. Te libra de las molestas configuraciones y herramientas de compilación de TypeScript, Webpack y demás.

Después de instalar la Angular CLI, necesitará ejecutar un comando para generar un proyecto y otro para correrlo usando un servidor local de desarrollo, con el fin de jugar con tu aplicación.

Como la mayoría de herramientas modernas para el frontend en la actualidad, la Angular CLI está construida sobre Node.js.

Node.js es una tecnología del lado del servidor que le permite a los desarrolladores ejecutar código JavaScript en el servidor y compilar aplicaciones web del lado del servidor. Sin embargo, Angular es una tecnología del frontend, por lo que incluso si necesita instalar Node.js en tu máquina de desarrollo, solo es para correr la interfaz de línea de comandos.

Una vez que compile tu aplicación para producción no necesitará Node.js, ya que el empaquetado final solo son HTML, CSS y JavaScript estáticos que pueden ser servidos por cualquier servidor web o un CDN (Content Delivery Network).

Dicho esto, si está construyendo una aplicación web full-stack con Angular, podría necesitar Node.js para crear la parte del backend en el caso de que desee usar JavaScript para el frontend y el backend.

Revise la MEAN Stack - es una arquitectura que incluye Mongo DB, Express (un servidor web y plataforma para API REST construida sobre Node.js) y Angular. Puede leer artículos en internet si quisiera un tutorial paso a paso para empezar con este stack.

En este caso, Node.js es usado para compilar el backend de tu aplicación y puede ser reemplazado por cualquier tecnología del lado del servidor que desee, como PHP, Ruby o Python. Pero Angular no depende de Node.js excepto por tu interfaz de línea de comandos (CLI) y para la instalación de paquetes con npm.

NPM se describe por Node Package Manager (Gestor de Paquetes para Node). Es un registro que hospeda los paquetes para Node y en los años recientes también ha sido usado para publicar paquetes y librerías para en frontend tales como Angular, React, vue.js e inclusive Bootstrap.

Instalar Angular CLI en Windows

Primero, necesita tener instalado Node.js y npm en tu máquina de desarrollo.

Hay varias maneras de hacerlo tales como:

• Usar NVM (Node Version Manager) para instalar y trabajar con múltiples versiones de node en tu sistema.
• Usar el manejador de paquetes oficial de tu sistema operativo.
• Instalarlo desde la página web oficial.

Para hacerlo sencillo usemos el sitio web oficial. Simplemente, visite la página de descargas y descargue los binarios para Windows, luego siga las instrucciones del asistente de instalación.

Puede asegurarse de que Node se encuentra instalado en tu sistema ejecutando el siguiente comando en la interfaz de línea de comandos o terminal, la cual debería mostrar la versión de Node instalada:

$ node -v

Continuando, ejecute el siguiente comando para instalar la Angular CLI:

$ npm install @angular/cli

Después de que el comando termine de ejecutarse exitosamente, debería tener la Angular CLI instalada.

Una Guía Rápida sobre la Angular CLI

Después de instalar la Angular CLI, puede ejecutar muchos comandos. Empecemos por chequear la versión de la CLI instalada:

$ ng version

Un segundo comando que podría necesitar ejecutar es el comando help para obtener una guía de ayuda completa:

$ ng help

La CLI provee los siguientes comandos:

add: Agrega soporte para una librería externa en tu proyecto.

build (b): Compila una aplicación de Angular en un directorio de salida llamado  dist/ en la ruta dada. Debe ser ejecutado dentro del un directorio que contenga un espacio de trabajo.

config: Retorna o establece valores de configuración para Angular.

doc (d): Abre la documentación oficial en el navegador (angular.io) y busca por un término dado.

e2e (e): Compila y sirve una aplicación Angular, luego ejecuta pruebas end-to-end usando Protractor.

generate (g): Genera y/o modifica archivos basándose en un esquema.

help: Lista los comandos disponibles y una descripción corta sobre ellos.

lint (l): Corre las herramientas de formato de código en la aplicación de Angular en una carpeta definida.

new (n): Crea un nuevo espacio de trabajo e inicializa una nueva aplicación Angular.

run: Ejecuta un comando personalizado definido en tu proyecto.

serve (s): Compila y sirve la aplicación, recompilando cuando hay cambios en archivos.

test (t): Ejecuta las pruebas unitarias en un proyecto.

update: Actualiza tu aplicación y sus dependencias. Vea https://update.angular.io/ para más referencias.

version (v): Muestra la versión de la interfaz de línea de comandos de Angular.

xi18n: Extrae los mensajes de localización (i18n) del código fuente.

Generar un Proyecto.

Puede usar la Angular CLI para generar rápidamente un nuevo proyecto Angular mediante la ejecución del siguiente comando:

$ ng new frontend

Nota: frontend es el nombre del proyecto. Puede, por supuesto, escoger cualquier nombre válido para tu proyecto. Como crearemos una aplicación full-stack estoy usando frontend como nombre para la aplicación frontend.

Como mencioné antes, la CLI preguntará si desea añadir enrutamiento a la aplicación, para lo cual puede responder y (Yes- Sí) o n (No) que es la opción por defecto. También se le preguntará acerca del formato de hoja de estilos que quiere usar (como CSS). Escoge tu opción preferida y presione Enter para continuar.

Después lo realizado tendrá tu proyecto creado con una estructura de directorios y un conjunto de configuraciones y archivos de código. Estos serán la mayoría en formato TypeScript y JSON. Veamos el papel de cada archivo:

• /e2e/: contiene los test end-to-end (simulan el comportamiento de un usuario) para el sitio web
• /node_modules/: todas las librerías de terceros son instaladas en esta carpeta usando el comando npm install
• /src/: contiene el código fuente de la aplicación. La mayoría del trabajo se realiza aquí
• /app/: contiene módulos y componentes
• /assets/: contiene recursos estáticos como imágenes, íconos y estilos
• /environments/: contiene configuraciones específicas de ambiente (como producción y/o desarrollo)
• browserslist: necesario para el soporte CSS para el autoprefixer
• favicon.ico: el archivo para el favicon
• index.html: el archivo HTML principal
• karma.conf.js: archivo de configuración de Karma (herramienta de prueba)
• main.ts: el archivo de inicio principal desde donde se carga el AppModule
• polyfills.ts: polyfills (fragmento de código que se utiliza para proporcionar una funcionalidad moderna en navegadores antiguos que no lo admiten de forma nativa) requeridos por Angular
• styles.css: la hoja de estilos global para el proyecto
• test.ts: es un archivo de configuración para Karma
• tsconfig.*.json: archivos de configuración para TypeScript
• angular.json: contiene las configuraciones para la línea de comandos de Angular
• package.json: contiene la información básica del proyecto (nombre, descripción y dependencias)
• README.md: un archivo markdown que contiene una descripción del proyecto
• tsconfig.json: archivo de configuración para TypeScript
• tslint.json: archivos de configuración para TSlint (una herramienta de análisis estático de código)

Sirviendo el Proyecto

La línea de comandos de Angular provee una cadena de herramientas de desarrollo completa para aplicaciones front-end en tu máquina local. Como tal, no necesita instalar un servidor web local para servir tu proyecto, únicamente ejecutar el comando ng serve desde tu terminal para servir tu proyecto localmente.

Primero, navegue a la carpeta de tu proyecto en la terminal ejecutando los comandos:

$ cd frontend
$ ng serve

Ahora puede navegar a la dirección http://localhost:4200/ para comenzar a jugar con tu aplicación front-end. La página se actualizará en vivo automáticamente cada vez que usted haga cambios en el código.

Generar Artefactos de una App Angular

La línea de comandos angular provee el comando, ng generate el cual ayuda a los desarrolladores a generar artefactos básicos de Angular tales como módulos, componentes, directivas, pipes, y servicios:

$ ng generate component mi-componente

mi-componente es el nombre del componente a crear. La Angular LCI automáticamente añadirá una referencia a components, directives ypipes en el archivo src/app.module.ts.

Si quiere añadir tu componente, directiva or pipe a otro módulo (otro diferente al módulo de aplicación principal, app.module.ts), simplemente puede agregar el prefijo con el nombre del módulo y un slash:

$ ng g component mi-modulo/mi-componente

mi-modulo es el nombre de un módulo existente.

Conclusión

En este tutorial, hemos visto cómo instalar la interfaz de línea de comandos (CLI) de Angular en tu máquina Windows, la cual hemos usado para inicializar un nuevo proyecto Angular desde cero.

También hemos visto varios comandos que puede usar a través del desarrollo de tu proyecto para generar artefactos, tales como módulos, componentes y servicios.