What is multi provider in angular2

multi: true means that one provider token provides an array of elements. For example all directives for router support routerLink, router-outlet are provided by ROUTER_DIRECTIVES.
If a new provider is registered with the token ROUTER_DIRECTIVES, then it overrides the previously registered directives. If multi: true (on the first registered and the new provider) is set, the new directives are added to the previously registered directives instead of overriding.

When ROUTER_DIRECTIVES is injected (constructor(@Inject(ROUTER_DIRECTIVES) directives) {}) an array of directive instances is injected. It usually doesn't make sense to inject ROUTER_DIRECTIVES. I used it just as an example because it is multi: true.

Using multi: true tells Angular that the provider is a multi provider. As mentioned earlier, with multi providers, we can provide multiple values for a single token in DI.

Usages:

If we have a couple of directives that should automatically be available in our entire application without anyone having to define them in component decorations, we can do that by taking advantage of multi providers and extending what is being injected for PLATFORM_DIRECTIVES.

@Directive(...)class Draggable { }@Directive(...)class Morphable { }@Component(...)class RootCmp { }

and

// at bootstrapbootstrap(RooCmp, [  provide(PLATFORM_DIRECTIVES, {useValue: Draggable, multi: true}),  provide(PLATFORM_DIRECTIVES, {useValue: Morphable, multi: true})]);

Details

What is a multi-provider?

Provider is defined here.

https://angular.io/api/core/Provider

Basically, the provider describes how an injector is configured. So a multi-provider is you using multiple providers instead of a single provider, for instance

providers: [ { provide: TOKEN1 , useClass: ClassName1}, { provide: TOKEN2 , useClass: ClassName2}]

In the above scenario, instances of both classes are created for the given token. This is then available for dependency injection (In the constructors of the particular classes.)

What is Token?

Token is the lookup key for locating the dependency value, for instance let’s take as follows…

then the lookup key is the TYPE of className, and the dependency value is the INSTANCE of its class.

providers: [ClassName]

In the following example, the TOKEN1, and TOKEN2 are the lookup keys, and the dependency values are the instance of both classes.

providers: [ { provide: TOKEN1 , useClass: ClassName1}, { provide: TOKEN2 , useClass: ClassName2}]

When do we use multi=true ?

The multi is useful when you register multiple providers for the same token. Let’s say in the following example, then the last provider is injected because it’s used at the end, meaning

you won’t be able to use a ClassName1 instance. So what you can do is to use multi=true, and this signals Angular to register multiple providers for the SAME token. So this injects an ARRAY of values.

What is the value? the value is the INSTANCE of the classes.

providers: [ { provide: TOKEN , useClass: ClassName1}, { provide: TOKEN , useClass: ClassName2}]

So the rule of thumb is if you are registering multiple providers for the same TOKEN then always use multi=true to avoid the first provider from not being injected. When it's injected, you can use it in the constructor of the class.

NOTE: I am not an expert in this area. So if you saw any problem please let me know.