CODEWITHSUNDEEP
angularjsangular
jadeallencook
jadeallencook

Reputation: 686

Dynamically Import Component From Variable (AngularJS)

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 }}>

Upvotes: 1

Views: 517

Answers (2)

jadeallencook
jadeallencook

Reputation: 686

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
      }
    ]
}

Upvotes: 0

Marlon Barcarol
Marlon Barcarol

Reputation: 508

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+

Upvotes: 2

Related Questions