angular - One framework. Mobile & desktop. Angular Docs

Triggering Angular2 change detection manually

I'm writing an Angular 2 component that has a property Mode(): string. I would like to be able to set this property programmatically not in response to any event. The problem is that in the absence of a browser event, a template binding {{Mode}} doesn't update. Is there a way to trigger this change detection manually?

Source: (StackOverflow)

Huge number of files generated for every Angular project

I wanted to start a simple hello world app for Angular.

When I followed the instructions in the official quickstart the installation created 32,000 files in my project.

I figured this is some mistake or I missed something, so I decided to use angular-cli, but after setting up the project I counted 41,000 files.

Where did I go wrong? Am I missing something really really obvious?

Source: (StackOverflow)

Difference between Constructor and ngOnInit

Angular provides life cycle hook ngOnInit by default. Could anyone tell me about the usage of ngOnInit if we already have a constructor?

Source: (StackOverflow)

Angular HTML binding

I am writing an Angular application, and I have an HTML response I want to display. How do I do that? If I simply use the binding syntax {{myVal}} it encodes all HTML characters (of course).

I need somehow to bind the inner html of a div to the variable value.


Source: (StackOverflow)

How to bundle an Angular app for production

I would like to track and update in this thread the latest best (and hopefully the simplest) method to bundle Angular (version 2, 4, ...) for production on a live web server.

Please include the Angular version within answers so we can track better when it moves to later releases.

Source: (StackOverflow)

Can't bind to 'ngModel' since it isn't a known property of 'input'

I've got the following error when launching my Angular app, even if the component is not displayed.

I have to comment out the so that my app works.

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

I'm looking at the Hero plucker but I don't see any difference.

Here is the component file:

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

    selector: 'intervention-details',
    templateUrl: 'app/intervention/details/intervention.details.html',
    styleUrls: ['app/intervention/details/intervention.details.css']

export class InterventionDetails
    // l'intervention est passée en paramètre du composant
    @Input() intervention: Intervention;

    public test : string = "toto";

Source: (StackOverflow)

Angular/RxJs When should I unsubscribe from `Subscription`

What is the best practice for uses Subscription.unsubscribe() in Angular apps?

When should I store Subscriptions and call unsubscribe() on destroy event and when can I ignore them. Saving all subscription introduces a lot of mess into component code.

HTTP Client Guide ignore subscriptions like this:

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

In the same time Route & Navigation Guide says that:

Eventually, we'll navigate somewhere else. The router will remove this component from the DOM and destroy it. We need to clean up after ourselves before that happens. Specifically, we must unsubscribe before Angular destroys the component. Failure to do so could create a memory leak.

We unsubscribe from our Observable in the ngOnDestroy method.

private sub: any;

ngOnInit() {
  this.sub = this.route.params.subscribe(params => {
     let id = +params['id']; // (+) converts string 'id' to a number
     this.service.getHero(id).then(hero => this.hero = hero);

ngOnDestroy() {

Source: (StackOverflow)

How can I select an element in a component template?

Does anybody know how to get hold of an element defined in a component template? Polymer makes it really easy with the $ and $$.

I was just wondering how to go about it in Angular 2.

Take the example from the tutorial:

import {Component} from '@angular/core'

     <input #myname(input)="updateName(myname.value)"/>
     <p>My name : {{myName}}</p>

export class DisplayComponent {
    myName: string = "Aman";
    updateName(input: String) {
        this.myName = input;

How do I catch hold of a reference of the 'P' or 'input' element from within the class definition?

Source: (StackOverflow)

How to use jQuery with Angular?

Can anyone tell me, how to use jQuery with Angular?

class MyComponent {
    constructor() {
        // how to query the DOM element from here?

I'm aware there are workarounds like manipulating the class or id of the DOM element upfront, but I'm hoping for a cleaner way of doing it.

Source: (StackOverflow)

@Directive v/s @Component in Angular

What is the difference between @Component and @Directive in Angular? Both of them seem to do the same task and have the same attributes.

What are the use cases and when to prefer one over another?

Source: (StackOverflow)

What is the equivalent of ngShow and ngHide in Angular2?

I have a number of elements that I want to be visible under certain conditions.

In AngularJS I would write

<div ng-show="myVar">stuff</div>

How can I do this in Angular 2?

Source: (StackOverflow)

Angular 2 typescript can't find names

I am using Angular 2 with TypeScript 1.6 and when I compile the code I get these errors:

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

This is the code:

import 'reflect-metadata';
import {bootstrap, Component, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/core';
  selector: 'my-app',
  template: '<input type="text" [(ng-model)]="title" /><h1>{{title}}</h1>',
  directives: [ CORE_DIRECTIVES ]
class AppComponent {
  title :string;

  constructor() {
    this.title = 'hello angular 2';

Source: (StackOverflow)

BehaviorSubject vs Observable?

I'm looking into Angular RxJs patterns and I don't understand the difference between a BehaviorSubject and an Observable.

From my understanding, a BehaviorSubject is a value that can change over time (can be subscribed to and subscribers can receive updated results). This seems to be the exact same purpose of an Observable.

When would you use an Observable vs a BehaviorSubject? Are there benefits to using a BehaviorSubject over an Observable or vice versa?

Source: (StackOverflow)

Angular2 - What is the meanings of module.id in component?

In Angular2, I have seen that @Component has property moduleId.

What does it mean?

And when module.id is not defined anywhere, the app still works.

How can it still work?

  moduleId: module.id,
  selector: 'ng-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [AppComponent]

Source: (StackOverflow)

Angular CLI SASS options

I'm new to Angular and I'm coming from the Ember community. Trying to use the new Angular-CLI based off of Ember-CLI.

I need to know the best way to handle SASS in a new Angular 2 project. I tried using the ember-cli-sass repo to see if it would play along since a number of core components of the Angular-CLI are run off of Ember-CLI modules.

It didnt work but than again not sure if I just misconfigured something.

Also, what is the best way to organize styles in a new Angular 2 project? I'd be nice to have the sass file in the same folder as the component.

Source: (StackOverflow)