Function not getting triggered from dynamic component(Angular7)

After trying out different ways I had to fall back to one of the tried out methods.

Error when the function gets called from dynamic component

So the things that I have done

<div class="fs-settings__upload-section__floor-wrapper__preview-image                       
<div id="toget" *ngIf="onActiveFloorPlan" class="dropzone fs- 
settings__upload-section__floor-wrapper__preview-image__image-area" 
appMovableArea appDropzone (drop)="move(currentBox, dropzone1)"  
[ngStyle]="{'width':'100%','background-image': 'url('+url+')', 
'background-repeat': 'no-repeat', 'background-position': 'center', 
'background-size': '100% 100%'}">
                <div *ngFor="let box of dropzone1" class="box"
                    appDroppable (dragStart)="currentBox = box" appMovable>
                    {{ box.dis }}
                </div>
        </div>
   <div>
      <div #vc></div>
   </div>
</div>


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

const template = meradata;

const tmpCmp = Component({template: template})(class {
});
const tmpModule = NgModule({declarations: [ tmpCmp ], imports: 
  [DragDropModule]})(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 div with id=get is the one statically place and with reference #vc will be dynamically
This is the whole html snippet

The dummy html which I am trying to load(It loads)

@ViewChild('vc', {read: ViewContainerRef}) _container: ViewContainerRef;

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

const template = meradata;

const tmpCmp = Component({template: template})(class {
});
const tmpModule = NgModule({declarations: [ tmpCmp ], imports: 
 [DragDropModule]})(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 actual function which will be called when ever user selects a different value from UI

 getExistingFloorPlan() {
 this.blobService.getBlobToText('floorplans', 
 `${this.siteRef}/${this.floorRef}`, (err, data) => {
  if (data) {
    this.url = data.split('url(&quot;')[1].split('&quot;); background- 
   repeat: no-repeat;')[0];
    data = data.replace(/&quot;/g,'')

    const template = data1;

    const tmpCmp = Component({template: template})(class {
    });
    const tmpModule = NgModule({declarations: [ tmpCmp ], imports: 
   [DragDropModule]})(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);
        })
    this.loaderService.active(false);
    this.onActiveFloorPlan = false;
    this.displayOrientation = true;
   } else {
    this.onActiveFloorPlan = true;
    this.displayOrientation = true;
    this.loaderService.active(false);
  }
 });
}



 dropzone1 = [];
 currentBox?: string;

 move(box: string, toList: string[]): void {
  this.removeBox(box, this.rooms);
  this.removeBox(box, this.dropzone1);

  toList.push(box);
 }

removeBox(item: string, list) {
 if (list.indexOf(item) !== -1) {
  list.splice(list.indexOf(item), 1);
}
}

=========

class_1.html:1 ERROR TypeError: _co.move is not a function
at Object.eval [as handleEvent] (VM2366 class_1.ngfactory.js:14)
at handleEvent (core.js:23459)
at callWithDebugContext (core.js:24529)
at Object.debugHandleEvent [as handleEvent] (core.js:24256)
at dispatchEvent (core.js:20908)
at eval (core.js:22398)
at SafeSubscriber.schedulerFn [as _next] (core.js:13879)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:204)
at SafeSubscriber.next (Subscriber.js:142)
at Subscriber._next (Subscriber.js:86)
class_1.html:1 ERROR CONTEXT 
DebugContext_ {view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: 
   {…}}
   component: (...)
   componentRenderElement: (...)
   context: (...)
   elDef:
   bindingFlags: 2
   bindingIndex: 0
   bindings: (2) [{…}, {…}]
   checkIndex: 0
   childCount: 9
   childFlags: 605110787
   childMatchedQueries: 2
   directChildFlags: 1131009
   element:
   allProviders: {MovableAreaDirective_155: {…}, DroppableService_56: {…}, 
   DropzoneDirective_156: {…}}
   attrs: (4) [Array(3), Array(3), Array(3), Array(3)]

The directives are getting triggered I guess
So the crux of the matter is the functions are not getting binded to the dynamically loaded component.
My objective is to trigger a function from dynamically loaded component(move function).
I also think that I have to clear the ref to dynamic component container everytime I load a new content so please suggest the best option for that as well.

Source: New feed
Source Url Function not getting triggered from dynamic component(Angular7)