To achieve this, we are going to use the entries() method of the Array:

for (const [index, element] of myArray.entries()) {
  console.log(index, element)
}

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

let originalObject = {name: 'Bunt', type: 'dog'};

Then, we want to make a copy of the originalObject. In ES6, we are going to do something like this:

let copiedObject = Object.assign({}, originalObject);

This will create the copiedObject with all the properties and respective values of the originalObject. Now, if we want to change a value in the copiedObject, this will not change also the value into the originalObject:

copiedObject.type = 'cat';

console.log(originalObject.type); // will print 'dog'
console.log(copiedObject.type); // will print 'cat'

Now, what is going to happen if we have a nested Object inside our Object, doing the same operations?

let originalObject = {name: 'Bunt', details: {type: 'dog', color: 'brown'}};

let copiedObject = Object.assign({}, originalObject);

copiedObject.details.type = 'cat'; 

console.log(originalObject.details.type); // will print 'cat' 
console.log(copiedObject.details.type); // will print 'cat'

As you can see, when you change the value of a property in the nested Object of copiedObject, that change is perpetuated to the same property of the nested Object in originalObject. You’ll ask why that happened? Because JavaScript passes the primitive values (string, number, etc.) as value-copy and the compound values (Objects, Arrays, Functions) as reference-copy to the value of the primitives on that Object. This way, when we copied the Object containing the nested Object, we have created a shallow copy of that object, meaning that the primitives found at the first level of the Object have values that are copied, thus when we change them into the copiedObject, they are not going to change in the originalObject while all other property found in a nested object will have the value passed as a reference to the same property value into the nested Object of originalObject, thus when we change its value, we actually change the value of the reference, resulting on both nested Objects having the modified property value.

Now, what’s the solution to deep copy an Object or Array, meaning that we want to have a copy free of references at all nested levels so we can change the values inside without the fear of breaking the original?

The first solution you are going to find is to serialize the Object to a JSON, then parse back that JSON to a JavaScript Object, practically passing the Object thru a string that will clean up the Object tree from the references nested inside by recreating a new Object with copied properties and values from the original one.

let copiedObject = JSON.parse(JSON.stringify(originalObject));

But this is a controversial solution. Why? Because this is going to work fine as long as your Objects and the nested Objects only contains primitives, but if you have objects containing functions, this won’t work. Neither for Date.

So, what’s the working solution? We are going to use lodash’s cloneDeep method to deep copy the Object. Lodash is an excellent JavaScript utility library for those not knowing it yet. The cloneDeep method will iterate all levels of the original Object and recursively copying all properties found.

The example I will give here is in Angular. Since we don’t want to carry all the bundle of lodash to the client, we are going only to import the cloneDeep method.

First, let’s install lodashinto our project:

yarn add lodash or npm install lodash

Once installed, we are going to use in our component:

import * as cloneDeep from 'lodash/cloneDeep';

...

clonedObject = cloneDeep(originalObject);

Importing cloneDeep will add to your build 18kb, a fair price to pay in order to have a reliable deep copy solution for you Objects.

I added a demo app on Github here.

Interested in Angular? Join our Angular Montreal Meetup.

For this example I’m gonna use the Atlassian Bitbucket Pipelines for continuous integration, but is not limited to it, you can use it in any other environment that is using a Docker Container, like Bitbucket, to test and build your Angular app.

To be able to test the Angular solution generated with @angular/cli, we need a Docker Container with Node to run npm install in order to install the dependencies and then we need an instance of chrome to run the tests.

For this, we have two solutions. I prefer the first one in which we take the official Node Docker Container, for the time being, 6.9.4, we install the chrome browser, then run npm install to fetch the dependencies of the project, then finally run our tests.

For Atlassian Bitbucket Pipelines, we are going to use the following code in the commit bitbucket-pipelines.yml file:

image: node:6.9.4

pipelines:
  default:
    - step:
        caches:
          - node
        script:
          - apt-get update; apt-get install -y gettext-base;
          - echo 'deb http://dl.google.com/linux/chrome/deb/ stable main' > /etc/apt/sources.list.d/chrome.list
          - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
          - set -x && apt-get update && apt-get install -y xvfb google-chrome-stable
          - wget -q -O /usr/bin/xvfb-chrome https://bitbucket.org/atlassian/docker-node-chrome-firefox/raw/ff180e2f16ea8639d4ca4a3abb0017ee23c2836c/scripts/xvfb-chrome
          - ln -sf /usr/bin/xvfb-chrome /usr/bin/google-chrome
          - chmod 755 /usr/bin/google-chrome
          - npm install
          - ./node_modules/@angular/cli/bin/ng -v
          - ./node_modules/@angular/cli/bin/ng test --watch=false

Please take into consideration that this is the code for a debian linux machine inside the Docker Container, so you have to adapt if you have a different machine.

I said that this solution is my preferred one because I want to test my app against the newest chrome version and I achieve this by installing the latest on each commit I make.

The downside of this solution is that it has to fetch all the updates for the linux machine and install chrome and it will take between 2 and 3 minutes to accomplish so this can become costly if you have a time limit on your Bitbucket account.

The second solution is to take a container from Docker Container Hub containing already Node and Chrome and to run the code starting from npm install. This way you cut in half the runtime, but you are going to test against the version of chrome installed into the Docker Container.

Have fun!

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.

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

Let’s say you have a directive where you have a button and once clicked you want an event to happen in another directive. The problem is that the two directives have different scopes, so passing the change directly is not possible. In this approach, we are going to use a service to pass the data between the controllers of the two directives.

For example, we are going to take a directive that has a button that once clicked we display a custom modal. The modal is another directive not related to the one where the click originated.

First, we are going to write the service:

"use strict";

angular.module("someApp").service("dataService", function () {

    var _isModalClicked  = false;

    this.setModalClicked = function(flag){
        _isModalClicked = flag;
    };

    this.getModalClicked = function(){
        return _isModalClicked;
    };
});

Then, from the controller sending the change (the one attached to button directive), we are going to set the variable on the service (don’t forget to import the service into the controller):

...
$scope.buttonClick = function(ev){
    dataService.setModalClicked(true);
}
...

At this point, we have wired the controller to the service and changed the state of _isModalClicked to true. What is left is to listen to that change inside of the controller consuming the event and to propagate the change, leading to showing the modal. The consuming controller will look like this:

'use strict';

angular.module('someApp')
    .controller('modalCtrl', function ($scope, dataService) {

        $scope.$watch(function() { return dataService.getModalClicked(); }, function(newVal) {
            $scope.showModal = newVal;
        }, true);
    });

This way, you have a clear separation of concerns when you want to pass a variable change between scopes.