Try one of these: ApplicationRef.tick() – similar to AngularJS’s $rootScope.$digest() — i.e., check the full component tree NgZone.run(callback) – similar to $rootScope.$apply(callback) — i.e., evaluate the callback function inside the Angular zone. I think, but I’m not sure, that this ends up checking the full component tree after executing the callback function. ChangeDetectorRef.detectChanges() – similar … Read more
Angular 2.0 router not working on reloading the browser
Angular 2.3.0 (2016-12-07) To get all the details check: How can I use/create dynamic template to compile dynamic Component with Angular 2.0? To see that in action: observe a working plunker (working with 2.3.0+) The principals: 1) Create Template 2) Create Component 3) Create Module 4) Compile Module 5) Create (and cache) ComponentFactory 6) use … Read more
The Constructor is a default method of the class that is executed when the class is instantiated and ensures proper initialisation of fields in the class and its subclasses. Angular, or better Dependency Injector (DI), analyses the constructor parameters and when it creates a new instance by calling new MyClass() it tries to find providers … Read more
Instead of injecting ElementRef and using querySelector or similar from there, a declarative way can be used instead to access elements in the view directly: <input #myname> @ViewChild(‘myname’) input; element ngAfterViewInit() { console.log(this.input.nativeElement.value); } StackBlitz example @ViewChild() supports directive or component type as parameter, or the name (string) of a template variable. @ViewChildren() also supports … Read more
EDIT: as of 2021, the proper way is to use the shareReplay operator natively proposed by RxJs. See more details in below answers. Cache the data and if available cached, return this otherwise make the HTTP request. import {Injectable} from ‘@angular/core’; import {Http, Headers} from ‘@angular/http’; import {Observable} from ‘rxjs/Observable’; import ‘rxjs/add/observable/of’; //proper way to … Read more
EDIT – related to 2.3.0 (2016-12-07) NOTE: to get solution for previous version, check the history of this post Similar topic is discussed here Equivalent of $compile in Angular 2. We need to use JitCompiler and NgModule. Read more about NgModule in Angular2 here: Angular 2 RC5 – NgModules, Lazy Loading and AoT compilation In … Read more
TL;DR For this question there are two kinds of Observables – finite value and infinite value. http Observables produce finite (1) values and something like a DOM event listener Observable produces infinite values. If you manually call subscribe (not using async pipe), then unsubscribe from infinite Observables. Don’t worry about finite ones, RxJs will take … Read more
The correct syntax is the following: <div [innerHTML]=”theHtmlString”></div> Documentation Reference
update Angular 5 StackBlitz example update ngComponentOutlet was added to 4.0.0-beta.3 update There is a NgComponentOutlet work in progress that does something similar https://github.com/angular/angular/pull/11235 RC.7 Plunker example RC.7 // Helper component to add dynamic components @Component({ selector: ‘dcl-wrapper’, template: `<div #target></div>` }) export class DclWrapper { @ViewChild(‘target’, {read: ViewContainerRef}) target: ViewContainerRef; @Input() type: Type<Component>; cmpRef: … Read more