1

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.

Felix Lemke
  • 6,189
  • 3
  • 40
  • 67
Enthu
  • 512
  • 2
  • 13
  • 38

1 Answers1

2

In your tmpModule you need to add you custom directive declaration

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

or import the module that declare this directives

Saif Jerbi
  • 667
  • 5
  • 16
  • in This Directive are you injecting "LocaleService" ?? If yes, you need to provide this service. Importing the sharedModule in your tmpModule is Ok, it works for you. I think now you forget to provide the LocaleService as the exception say that DaterangepickerComponent need a LocaleService to be instantiated – Saif Jerbi Jul 29 '19 at 13:49
  • Actually I think this ngx-daterangepicker-material npm module which has been imported in the app and eventually in other modules is giving me an error ,I did same for this dynamic module as well ,but dont know how to resolve this issue – Enthu Jul 29 '19 at 13:55
  • @Enthu you should add NgxDaterangepickerMd import to your tmpModule – Saif Jerbi Jul 29 '19 at 15:28
  • I added it to the tmpModule but after that also getting same error :) . I havent used Jitcompiler can that be an issue – Enthu Jul 29 '19 at 15:35
  • Could you please fill the code on stackblitz ? So i can debug it. Just an example of the Angular side – Saif Jerbi Jul 29 '19 at 17:06
  • You can put it where ever you want. I have the same behavior in a real project in which I'm calling a REST API that returns me the Angular HTML template to render. So im creating the dynamic component and module in the subscribe block of an observable and after that i'm injecting the dynamic component using ViewChild. In my case the service call is on ngOnInit() – Saif Jerbi Jul 29 '19 at 17:35
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/197241/discussion-between-enthu-and-saif-jerbi). – Enthu Jul 31 '19 at 05:51