title: Drag from menu, pass mouse event to component
body: <p>pleas i need some help. What i am trying to do? I want to drag a component from menu to grid. Seamlessly.
  What i have done so far. 
  I have  menu component when i start dragging service is called that lats the component holding grid know that it has to create a new dynamic component. this is working. </p>
  
  <p>I do not know how to pass the mouse drag event to the new component. so that you would be dragging the new component ? Now the component is created but the drag remains on the clicked link.</p>
  
  <p>SERVICE CODE:</p>
  
  <pre><code> @Injectable()
  export class DragDropService {
  dragSubject = new Subject(); 
  draggedItem: any;
  
  constructor() { }
  
  public setItemDraged(item: any,event:any): void {
  
     this.draggedItem = {}; 
     this.draggedItem.item = item;
     this.draggedItem.event = event;
     this.dragSubject.next(this.draggedItem);
  
   }
  </code></pre>
  
  <p>ORIGIN COMPONENT</p>
  
  <pre><code>onDrag(menuItem,event) {
  
      this.dragDropService.setItemDraged(menuItem,event);
  }
  </code></pre>
  
  <p>DESTINATION COMPONENT </p>
  
  <pre><code> ..
   this.dragDropService.dragSubject.subscribe(value =&gt; {
          this.createComponent(value);
      });
   ..
   createComponent(item) {
      switch (item.event.which) {
          case 1:
              // left mouse button
              break;
          case 2:
          case 3:
              // right or middle mouse button
              return;
      }
  
      const factory = this.resolver.resolveComponentFactory(ArticlesComponent);
      const componentRef = this.entry.createComponent(factory);
  
      let new_event  = new MouseEvent(item.event.type, item.event);
      item.event.preventDefault();
      componentRef.instance.headChild.nativeElement.click(new_event);         
  }
  </code></pre>