Angular 2 Component Resolver

Warning: ComponentResolver has now been replaced with ComponentFactoryResolver in the final release of Angular 2.

I often take advantage of $compile in Angular 1 to dynamically load directive templates. This saves on excess logic required in controllers and templates; it keeps things tidy. The ability to load templates dependent on a parameter is a powerful approach for directives that could be used for multiple or differing purposes in your app.

In Angular 2, $compile doesn’t exist. I’ve had to dig around (documentation is sparse) to find a suitable solution which turned out to be the ComponentResolver service.

This service can be used to render a component instance into a html tag within a component template. The drawback this approach has compared with $compile is you’re dealing with an actual component, no shared controller no multiple template files. This means you have to take the additional step of passing through any values, parameters or shared logic to the child component.