node_modules/

:host {

display: block ;

font-size: 18px ;

}

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

import { Inject } from "@angular/core";

import { Greeter } from "./greeters";

import { GREETERS } from "./greeters";

import { MeanGreeter } from "./greeters";

import { NiceGreeter } from "./greeters";

@Component({

selector: "my-app",

styleUrls: [ "./app.component.less" ],

template:

`

export class AppComponent {

// I initialize the app component. Notice that we are injecting BOTH the collection

// of Greeters as well as the individual instances. We can then confirm that the

// collection of Greeters is a mere aggregation of the individual references.

constructor(

@Inject( GREETERS ) greeters: Greeter[],

meanGreeter: MeanGreeter,

niceGreeter: NiceGreeter

) {

console.group( "@Inject( GREETERS )" );

console.log( "Count:", greeters.length );

console.log( greeters[ 0 ] );

console.log( greeters[ 1 ] );

console.groupEnd();

console.group( "MeanGreeter" );

console.log( meanGreeter );

console.log( "=== greeters[ 0 ]:", ( meanGreeter === greeters[ 0 ] ) );

console.log( "=== greeters[ 1 ]:", ( meanGreeter === greeters[ 1 ] ) );

console.groupEnd();

console.group( "NiceGreeter" );

console.log( niceGreeter );

console.log( "=== greeters[ 0 ]:", ( niceGreeter === greeters[ 0 ] ) );

console.log( "=== greeters[ 1 ]:", ( niceGreeter === greeters[ 1 ] ) );

console.groupEnd();

}

import { BrowserModule } from "@angular/platform-browser";

import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";

import { GREETERS } from "./greeters";

import { MeanGreeter } from "./greeters";

import { NiceGreeter } from "./greeters";

@NgModule({

bootstrap: [

AppComponent

],

imports: [

BrowserModule

],

declarations: [

AppComponent

],

providers: [

// First, we're going to provide the greeters as individually injectable

// services. This way, each one can be referenced directly, if needed.

MeanGreeter,

NiceGreeter,

// Next, we're going to provide the AFOREMENTIONED greeters as a collection

// of services. This way, the two services can be injected as a single set of

// services that implement the Greeter interface. By using the "useExisting"

// configuration, the instances associated with the preceding tokens will be

// used, rather than creating new instances of each service.

{

provide: GREETERS,

multi: true,

useExisting: MeanGreeter // ... use instance already in the DI container.

},

{

provide: GREETERS,

multi: true,

useExisting: NiceGreeter // ... use instance already in the DI container.

}

]

export class AppModule {

// ...

import { InjectionToken } from "@angular/core";

export var GREETERS = new InjectionToken<Greeter[]>( "Greeter[] Multi Token" );

export interface Greeter {

greet( name: string ) : string;

export class NiceGreeter implements Greeter {

public greet( name: string ) : string {

return( `Hello ${ name }, so nice to meet you.` );

}

export class MeanGreeter implements Greeter {

public greet( name: string ) : string {

return( `What evs ${ name }, talk to the hand!` );

}

<meta charset="utf-8" />

<title>

Providing Services As Both A Multi-Collection And As An Individual Injectable In Angular 5.1.0

</title>

<h1>

Providing Services As Both A Multi-Collection And As An Individual Injectable In Angular 5.1.0

</h1>

<my-app>

<p>

<em>Loading files...</em>

</p>

<p>

npm Run Scripts:

</p>

<ul>

<li>

<strong>npm run build</strong> &mdash; Compiles the .ts file into bundles.

</li>

<li>

<strong>npm run watch</strong> &mdash; Compiles the .ts file into bundles and then watches files for changes.

</li>

</ul>

</my-app>

import "core-js/client/shim.min.js";

import "zone.js/dist/zone.js";

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { AppModule } from "./app.module";

platformBrowserDynamic().bootstrapModule( AppModule );

import "@angular/core";

import "@angular/platform-browser-dynamic";