title: ng-dragula removing dragged item, angular 4 router
body: <p>we have an app which built with angular 4 and now we are trying to customize our theme by using dragula. I implemented every part of the page and it is working, persisting and etc. But now I have one big problem. We used angular routerlink to switch between our pages. Every thing works fine, but after I switch to another page (which works with angular routerlink) and I come back to main page, it will cause dragula to not working properly. I printed the results but it seems the position of each node is persisted and it is truly working but after I drag each of components it will disappear.
  Hear is some code which may help:</p>
  
  <pre><code>&lt;span *ngFor="let portion of filterUndefinedItems(getPortions1())"&gt;
      &lt;rh-market-watch
          *ngIf="portion.name == 'market-watch'"
          style="display: flex;"&gt;&lt;/rh-market-watch&gt;
  </code></pre>
  
  <p>...</p>
  
  <pre><code>this._dragulaService.setOptions('bag-one', {
      revertOnSpill: true,
      copy: true,
      moves: function (el: any, container: any, handle: any): any {
          if(el == null || el.children[0] == null) return false;
          me.selectedElementName = el.children[0].getAttribute('name');
          me.selectedElementsParentId = container.id;
  
          return typeof(handle.className) == 'string' &amp;&amp; handle.className.indexOf('draggable-main') &gt;= 0;
      }
  });
  this._dragulaService.drop.subscribe((value) =&gt; {
      if (value[2].id != this.selectedElementsParentId) {
          if (value[2].id.indexOf('2') &gt; 0)
              this.updateComponentColumn(this.selectedElementName, 2);
          else if (value[2].id.indexOf('3') &gt; 0)
              this.updateComponentColumn(this.selectedElementName, 3);
          else
              this.updateComponentColumn(this.selectedElementName, 1);
      }
      if (value[4] != null &amp;&amp; value[4].firstElementChild != null)
          this.updateComponentPosition(
              value[1].firstElementChild.getAttribute('name'),    // Name of element which we want to move, for example x
              value[4].firstElementChild.getAttribute('name')     // Name of element which x will place on top of it
          );
      let userDataList: UserData[] = [];
      let userData: UserData = new UserData;
      userData.dataKey = UserData.EXIR_CUSTOM_THEME_POSITIONS;
      userData.dataValue = JSON.stringify([this.getPortions1(), this.getPortions2(), this.getPortions3()]);
      userDataList.push(userData);
  
      this._restService.setUserData(userDataList, this._http)
          .then(error =&gt; {
              this.error(error);
          });
  });
  private findPortion(portionName): any[] {
      for(let portion of this.getPortions1())
          if(portion.name == portionName)
              return [1, portion];
      for(let portion of this.getPortions2())
          if(portion.name == portionName)
              return [2, portion];
      for(let portion of this.getPortions3())
          if(portion.name == portionName)
              return [3, portion];
      return null;
  }
  
  private getRelatedPortions(portionNumber): Portion[] {
      switch (portionNumber) {
          case 1:  return this.portions1;
          case 2:  return this.portions2;
          case 3:  return this.portions3;
          default: return null;
      }
  }
  
  private setRelatedPortions(portionNumber, portions) {
      switch(portionNumber) {
          case 1:
              this.portions1 = portions;
              return;
          case 2:
              this.portions2 = portions;
              return;
          case 3:
              this.portions3 = portions;
              return;
          default:
              return;
      }
  }
  
  private updateComponentPosition(portionName: string, newPosition: string) {
      let portionInfo: any[] = this.findPortion(portionName);
      let portionNumber: number = portionInfo[0];
      let portionToDrag: Portion = portionInfo[1];
  
      this.setRelatedPortions(portionNumber, this.getRelatedPortions(portionNumber).filter(obj =&gt; obj !== portionToDrag));
      this.getRelatedPortions(portionNumber).splice(this.getRelatedPortions(portionNumber).indexOf(this.findPortion(newPosition)[1]), 0, portionToDrag);
  }
  
  private updateComponentColumn(portionName: string, column: number) {
      let portionInfo: any[] = this.findPortion(portionName);
      this.getRelatedPortions(portionInfo[0]).splice(this.getRelatedPortions(portionInfo[0]).indexOf(portionInfo[1]), 1);
      this.getRelatedPortions(column).push(portionInfo[1]);
  }
  </code></pre>
  
  <p>The way I showed components:
  I have 3 div elements which has [dragula]='bag-one' and also 3 lists which indicates which item should be appear in which div. In each div I placed every drag-able element in a for loop in a span. So every element will be printed if it is in the corresponding list. It is working very well, but after I switch to a routerlink and come back to the main page again, ng-dracula stops working and it is not moving items. It seems it is related to routerlink in angular but I do not know why.</p>
  
  <p>I also faced some css issues, for example my components have css style: display: grid but after routerlink, I have this style, but it is not working and when I disable it and re-enable it, it works just fine.</p>
  
  <p>Any helps will greatly appreciated.</p>