Note: given the semver adopted from now on by Angular team, I will refer to all versions of Angular2+ as Angular. For the old Angular 1.x, I will use AngularJs

The new HttpClient on Angular 5 is here to replace the deprecating @angular/http module.

The new HttpClientModule will be imported from @angular/common/http.

For the purpose of this article, we are going to use a service to fetch the data in which we are going to inject the new HttpClient. Our service is going to be injected into the component that is supposed to consume the data.

First, we need to import the HttpClientModule. We need to do this only once at the app.module level.

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

...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

After that, we are going to inject the HttpClient into our service and to use it inside a get() function.

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable()
export class FetchDataService {

  constructor(private _http: HttpClient) { }

  getUsers() {
    return this._http.get('https://yourapi/users');
  }

}

The getUser() will return an Observable that we are going to treat in our consuming component.

import { Component, OnInit } from '@angular/core';
import { FetchDataService } from '../fetch-data.service';

@Component({
  selector: 'fetch-data',
  templateUrl: './fetch-data.component.html',
  styleUrls: ['./fetch-data.component.scss']
})
export class FetchDataComponent implements OnInit {

  constructor(private _fetchDataService: FetchDataService) { }

  data: any; //any here is just for demo purpose; please change with the type returned by your endpoint

  ngOnInit() {
     this._fetchDataService.getUsers().subscribe(
      data => { this.data = data},
      err => console.error(err)
     );
  }

}

Since getUsers() returns an Observable, we call the subscribe() function to listen and process the returned data.

If your company needs consulting on migration from Angular 1 to Angular 2/4/5 or training/update Angular knowledge, write me to contact@bogdancarpean.com

In this post, we’ll take a look on how to dynamically inject a component into the DOM using a directive as a placeholder and ViewContainerRef Angular class.

For simplicity, we will declare a new Angular component that later will be dynamically added/removed to/from the DOM:

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

@Component({
  selector: 'app-injected',
  templateUrl: `<div>Another component was added</div>`,
  styleUrls: ['./injected.component.css']
})
export class InjectedComponent {

}

Then we declare the directive used as a placeholder on the DOM where we want to inject the new component:

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

@Directive({
  selector: '[appInject]'
})
export class InjectDirective {

  constructor(public viewContainerRef: ViewContainerRef) { }

}

We add the directive on DOM in the place where the new component will be injected:

<div class="where_you_want_to_inject">    
  <ng-template appInject></ng-template>
</div>

Finally, into the parent component, we add two functions, one who add the component, other who remove it:

import { Component, ViewChild, ComponentFactoryResolver } from '@angular/core';
import { InjectDirective } from '../inject.directive';
import { InjectedComponent } from '../injected/injected.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  @ViewChild(InjectDirective) injectComp: InjectDirective;

  constructor(private _componentFactoryResolver: ComponentFactoryResolver) {
  }

  public addComp() {
    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(InjectedComponent);
    const viewContainerRef = this.injectComp.viewContainerRef;
    const componentRef = viewContainerRef.createComponent(componentFactory);
  }

  public removeComp() {
    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(InjectedComponent);
    const viewContainerRef = this.injectComp.viewContainerRef;
    const componentRef = viewContainerRef.remove();
  }

}

This way we can dynamically add/remove components.

If you need an example, I added a working demo app on Github here.

If your company needs consulting on migration from Angular 1 to Angular 2/4/5 or training/update Angular knowledge, write me to contact@bogdancarpean.com

So, you will be left wondering how to watch the changes on your array/object, needed on every application. You start googling for a solution. You will find either deprecated info or workarounds like adding an event emitter where your object is updated. No need to mention that this is not a clean solution, neither a reliable one. Let’s suppose that you have a component that receives a bind data source that you cannot control, what are the options?

So let’s do this like is supposed to be done, on our component, using the Angular directive dirty check life-cycle hook DoCheck and iterable diffing strategies IterableDiffers (for arrays) or KeyValueDiffers (for objects), all of them on @Angular/core.

Our component will look like the following:

import { Component, Input, IterableDiffers, DoCheck } from '@angular/core';

@Component({
  selector: 'app-array-watch-demo',
  templateUrl: './array-watch-demo.component.html',
  styleUrls: ['./array-watch-demo.component.css']
})
export class ArrayWatchDemoComponent implements DoCheck {

  @Input() datasource: Array<any> = [];

  differ: any;

  constructor(differs: IterableDiffers) {
     this.differ = differs.find([]).create(null);
   }

  ngDoCheck() {
    const change = this.differ.diff(this.datasource);
    console.log(change);
    // here you can do what you want on array change
    // you can check for forEachAddedItem or forEachRemovedItem on change object to see the added/removed items
    // Attention: ngDoCheck() is triggered at each binded variable on componenet; if you have more than one in your component, make sure you filter here the one you want.
  }

}

Basically, here we add DoCheck() that is triggered by each bind element change and there we do a diff between the former and actual state on the variable to read the changes.

This solution works on Angular 4.2.3 (June 2017) and is not tested on earlier versions.

I added a demo app on GitHub if you want to see how it works:

https://github.com/bogdancar/angular2-array-object-change-watch-demo