I'm trying to load a component based off of a variable but I get a "Uncaught Error: Template parse errors". How would I go about doing something like this?
<app-{{ this.plugin.component }}></app-{{ this.plugin.component }}>
Add a comment
|
2 Answers
I don't think that is possible to do it on template, but you certainly can do it on your controller/component try to do something like:
var scope = $rootScope.$new();
var element = angular.element('<app' + variable + '></app' + variable + '>');
element = $compile(element)(scope);
To print the element in your template you'll need to use $sce:
How do you use $sce.trustAsHtml(string) to replicate ng-bind-html-unsafe in Angular 1.2+
Comments
Have to add each path manually to the "app.module" but everything seems to operate by using child paths. Wish there was a way to more dynamically use components with the tags but this will work for what I'm doing now.
{
path: 'mypath',
component: MyComponent,
children: [
{
path: 'childpath',
component: ChildComponent
}
]
}