[Angular] Advanced DI

In this post, we are going to see how to solve one design pattern challenge.

The challenge is what we a simplest way to find out the children elements which belongs to Animals, which belongs to Materials inside the container component.

  <app-animals>
      <cat></cat>
      <dog></dog>
      <rock></rock>
      <fox></fox>
      <viking></viking>
  </app-animals>

As we can see that:

　　Animals are <cat>, <dog>, <fox>, <viking>.

Material is <rock>.

1. First way we might use is Tamplate Ref:

<cat  #item></cat>
<fox  #item></fox>

  // #item Ref

   @ContentChildren('item') itemRefsQL: QueryList<any>>

   const items = this.itemRefsQL.toArray();

It will work, but the problem for this solution is that, the container should know what children it has. Also the chance that I might mis-mark the component.

2. We can use 'directive' + {read: ElementRef}:

animal.directive.ts:

import { Directive } from '@angular/core';
 
@Directive({
  // tslint:disable-next-line:directive-selector
  selector: '[animal]'
})
export class AnimalDirective {}

<cat animal></cat>
<dog animal></dog>

@ContentChildren(AnimalDirective, {read: ElementRef}) directiveElementsQL: QueryList<ElementRef>;
const directiveElements = this.directiveElementsQL.toArray();

Here without {read: ElementRef}, it won't work. We need it to tell Angular we are actually looking for the host element of the directive. Not direcitve itself.

But still the same problem as Tempalte Ref, we need to mark in the template to tell which component we need.

3.  Similar to using directive only, but {read: <interface>}.

We create a Animal interface and the component implements Animal interface.

animal.ts:

export abstract class Animal {
  name: string;
  abstract speak(): void;
  abstract clear(): void;
}

dog.component.ts:

import { Component } from '@angular/core';
import { Animal } from './animal';
 
@Component({
  // tslint:disable-next-line:component-selector
  selector: 'dog',
  template: `
  <div>
    <img src="../assets/dog.jpg"/>
    <h3>{{saying}}</h3>
  </div>
  `,
})
// Subclasses Animal
export class DogComponent extends Animal {
 
  name = 'Dog';
  saying: string;
 
  speak() {
    this.saying = 'Woof';
  }
 
  clear() {
    this.saying = '';
  }
 
}

Now what we can do is Query by Animal interface in the contianer component:

<cat  animal ></cat>

  @ContentChildren(AnimalDirective, {read: Animal}) directiveAnimalsQL: QueryList<Animal>;
  const directiveAnimals  = this.directiveAnimalsQL.toArray();
  console.log("directiveAnimals", directiveAnimals);
/*
CatComponent {injector: Injector_, name: "Cat"}
DogComponent {name: "Dog"}
FoxComponent {name: "Fox"}
VikingComponent {name: "Viking"}
*/

4. Recommended: Finally we come to our recommended solution.

Using alias Injection of the component itself.

import { Component } from '@angular/core';
import { Animal } from './animal';
 
@Component({
  // tslint:disable-next-line:component-selector
  selector: 'fox',
  template: `
  <div>
    <img src="../assets/fox.jpeg"/>
    <h3>{{saying}}</h3>
  </div>
  `,
  providers: [
    { provide: Animal, useExisting: FoxComponent }
  ]
})
export class FoxComponent implements Animal {
  name = 'Fox';
  saying: string;
 
  speak() {
    this.saying = 'ring-ding-ding-ding-dingedinging';
  }
 
  clear() {
    this.saying = '';
  }
 
}

For the animals related component, we inject the provider 'useExisting', so it always refer to the same instance. And we use interface Animal as alias.

Now, our container can be really clean:

      <cat ></cat>
      <dog></dog>

  // Any projected component with an Animal "interface" in its injector

   import { Animal } from './animal';

  @ContentChildren(Animal) animalsQL: QueryList<Animal>;
 
  ngAfterContentInit() {
     const animals = this.animalsQL.toArray();
  }

Talk, Github