48 respuestas a las preguntas más populares sobre Angular en StackOverflow

GM Fuster — Mon, 17 Oct 2022 03:10:11 +0000

Artículo original: 48 answers on StackOverflow to the most popular Angular questions

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'. ("
    
        Creado:
        ][(ngModel)]="test" placeholder="foo" />
    
"): InterventionDetails@4:28 ; Zone:  ; 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:

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 = 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:`
     
     Mi nombre : {{miNombre}}
    `
    
})
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:

alguna cosa

¿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í:

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: `
    
      {{nombre}}
      {{ciudad}}
    
  `
})
class TarjetaVisita {
  @Input() nombre: string
  @Input() ciudad: string
  constructor() {}
}

Y se usaría así:

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:`
        mi app
        
    `,
    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: `
        Factoria
        Hall - Vista General
        
    `,
    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: `
         {{valorSeleccionado}}`
})
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:


    
        Nombre

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:


  contenido ...



 otro contenido...

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

Bougarfaoui El houcine contesta, (384+ votos)

Angular 4 y 5:

Usando else :


    contenido ...


otro contenido...

También puedes usar then else :

esto se ignora

contenido...
otro contenido...

o then :



contenido...

Demo :

Plunker

Detalles:

: Es la implementación de Angular de la etiqueta

GM Fuster - freeCodeCamp.org

48 respuestas a las preguntas más populares sobre Angular en StackOverflow

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' ya que no es una propiedad conocida de 'input'

Vinculación de HTML en Angular

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

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

— — Editado 2 (2016/12/28)

— — Editado 1

— — Repuesta Original

¿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

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

Configurar una vez

Configuran el empaquetado

Output

Despliegue (deployment)

BehaviorSubject vs Observable

@Directive vs @Component en Angular

Directives

Components

{{nombre}}

En resumen

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])

Clase en el servicio

hall-center.component

mi app

app.component

Factoria

tsconfig.json

¿Cómo se puede usar jQuery con Angular?

{{valorSeleccionado}}

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)

Hola {{nombre}}

Vinculando el elemento seleccionado a un object en Angular

Mi Aplicacion

Mi Aplicacion

{{titulo}}

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

Shell

¿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?

Hola {{nombre}}

¿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.

Componente Router

Test de enrutamiento/routing

Componente Router

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

pestanas

Hola {{nombre}}

c1

c2

c3

Pestanas

Hola {{nombre}}

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

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

ngIf y ngFor en el mismo elemento causa un error

Hoisting de variables con `var`

Hoisting de variables con `let` y `const`

`typeof` en la TDZ

Paso 1: comprueba si tienes `node` y `npm` instalados en tu computadora

Paso 3: Cómo crear una aplicación de una sola página con`create-react-app`

Paso 5: Crea un componente nuevo dentro del directorio `src`

Paso 6: Agregar la información necesaria para que `form` sea detectable para los bots de Netlify

Agrega la versión HTML del formulario al fichero `index.html`

Agrega un elemento `input` con "hidden" en tu JSX form

Contexto `this`