Running this after you update to Angular 6 will result in the following error: Architect command with multiple targets cannot specify overrides. This error is not much of help when you know that before update the linting worked fine.

For this to work, we have to add the name of the application after the ng lint command: ng lint your_app_name --format stylish

Why is this important? Progressive Web Apps (or PWA) are seen for many years now as the evolution of apps, bound to replace the native mobile apps and offer the user a seamless experience (native-like) on mobile platforms. With the announcement of Service Worker API development on Webkit/Safari, the future of across the board support for Service Worker never looked better.

What Service Worker is supposed to do? As a building part of a PWA, the Service Worker is a mandatory condition, because is the part of the application that is going to run in the background to handle application requests and caching, permitting the application to function while offline, thus having the native-like behavior.

As of @angular/cli version 1.6, you can create your Angular application containing the Angular Service Worker simply by passing the --service-worker flag when you create the app using the CLI:

ng new yourappname --service-worker

If you look now into the folder/app, you notice that a new file appeared,ngsw-config which is the configuration file for the added Angular Service Worker. Inside this file, you can decide which assets will be cached and in which manner.

Then, when you build your app, on the folder/dist you will see them ngsw.jsonand,ngsw-worker.js which is the actual Angular Service Worker.

More info on how to add the Angular Service Worker to your app here.

If you want to learn more about the Service Worker, here is a good article.

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

Supposing you want to use the flexbox CSS property to style your Angular app. So you will have a cascade of flex element that at some point will look like this:

<div class="wrapper"> //flex parent
  <angular-component></angular-component>
    <div class="children"> //flex children - inside angular component
    //some content
    </div>
</div>

Now you realize that you cannot apply flex property on the child, because the angular-element is cutting the flex tree.

The solution for this problem is to apply flex property on angular-component using `:host` selector on component CSS style:

:host {
    display: flex;
}

This will apply flex property to the generated DOM node representing the angular-element, thus not breaking the flex tree.

Let’s assume that you have a structure like following:

- your.component

  - your-child1.component

  - your.child2.component

-your.pipe

-your.module

In your.module you will import and declare all your three components and the pipe:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { YourComponent }  from './path.to.component';
import { YourChild1Component } from './path.to.component';
import { YourChild2Component } from './path.to.component';
import { YourPipe } from './path.to.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ YourComponent, YourChild1Component, YourChild2Component, YourPipe ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Same way you should do in your test class for your tests to work, you import the components and the pipe and add them to your

TestBed.configureTestModule(declarations: [Your component, YourChild1Component, YourChild2Component, YourPipe])

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