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.