Is there a way to dynamically render different templates for an angular 1.5 component
This is not something that components were specially made for. The task narrows down to using a directive with dynamic templates. The existing one is ng-include
.
To use it within a component, it should be:
var myComponentDef = { bindings: { type: '<' }, template: '<div ng-include="$ctrl.templateUrl">', controller: function () { this.$onChanges = (changes) => { if (changes.type && this.type) { this.templateUrl = this.type + '.html'; } } }}
You can inject any service and set dynamic url
angular.module('myApp').component("dynamicTempate", { controller: yourController, templateUrl: ['$routeParams', function (routeParams) { return 'app/' + routeParams["yourParam"] + ".html"; }], bindings: { }, require: { } });
You have to have the switching logic somewhere in any case so why not simply have it in a parent component template?
Having clean and understandable AngularJS template in that case is IMO more valuable than a bit of repetition:
<ng-container ng-switch="$ctrl.myComponentDef.type"> <component-type1 ng-switch-when="type1" param="$ctrl.myComponentDef"></component-type1> <component-type2 ng-switch-when="type2" param="$ctrl.myComponentDef"></component-type2></ng-container>
Even if you change the myComponentDef.type on the fly, the components in the switch will correctly call their respective $onDestroy
and $onInit
methods and load data as expected - no magic, no voodoo.