CODEWITHSUNDEEP
angulartypescriptangular-directive
Enthu
Enthu

Reputation: 532

Angular directive not working in dynamically loaded component

I have tried loading the component dynamically, the content is loading but the custom directives are not working I referenced

Dynamically load Angular 4 template using existing component and module

And this reference seems to be old and is overwhelming on how to use jit compiler

How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

Note the myData which I am getting from backend response is 

   <div xmlns="http://www.w3.org/1999/xhtml" _ngcontent-c18="" 
   appdropzone="" class="dropzone fs-settings__upload-section__floor-wrapper__preview- 
   image__image-area ng-star-inserted" id="toget" ng-reflect-ng-style=" 
   [object Object]"
   style="width: 100%; background-image: 
   url(&quot;data:image/png;base64,iVBORw0KGgoAAAANqyYtn1F
   AhKXkFi/hkQfuCuyO Lfk9ykpOc5CQnOcnR8n/9ySZhLa0Cg==&quot;); background- 
   repeat: no-repeat; background-position: center center; background- 
   size: 
   100% 100%;"><!--bindings={
   "ng-reflect-ng-for-of": ""
   }--><div _ngcontent-c18="" appdroppable="" appmovable="" class="box 
   draggable movable ng-star-inserted" touch-action="none"
  style="transform: translateX(136.8%) translateY(50.4%);"> vav3 </div> 
  <div _ngcontent-c18="" appdroppable="" appmovable=""
  class="box draggable movable ng-star-inserted" touch-action="none" 
  style="transform: translateX(837.6%) translateY(3.20003%);"> vav5 
  </div>
  <div _ngcontent-c18="" appdroppable="" appmovable="" class="box 
  draggable 
  movable
  ng-star-inserted" touch-action="none" style="transform: 
  translateX(639.2%) translateY(340.8%);"> vav54 </div>
  <div _ngcontent-c18="" appdroppable="" appmovable="" class="box 
  draggable movable ng-star-inserted"
  touch-action="none" style="transform: translateX(-288.8%) 
  translateY(276.8%);"> vav4 </div></div>

And the code which I tried with some random html also passing my custom directive in the template, the template loads but the custom directives are not working

ngAfterViewInit() {
 let myData = '<div appMovableArea appDropzone (drop)="move(currentBox, 
    dropzone1)" class="dropzone" style="width:50%; height:50%"></div>'

 const template = myData;

 const tmpCmp = Component({template: template})(class {
 });
 const tmpModule = NgModule({declarations: [tmpCmp]})(class {
 });

 this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
    .then((factories) => {
        const f = factories.componentFactories[0];
        const cmpRef = f.create(this._injector, [], null, this._m);
        //cmpRef.instance.name = 'B component';
        this._container.insert(cmpRef.hostView);
    })
}

The HTML element loads but my custom directives doesn't appear to be working.

Upvotes: 1

Views: 1675

Answers (1)

Saif Jerbi
Saif Jerbi

Reputation: 675

In your tmpModule you need to add you custom directive declaration

NgModule({declarations: [appDropzone, appMovableArea, tmpCmp]})

or import the module that declare this directives

Upvotes: 2

Related Questions