Drag and Drop mat-card in mat-grid using ng2-dragula

Question

I have a grid of 6 which is depedent on flyer arrays. Inside that grid, I have cards for my each flyer. I want to change the position of my card from tile to tile.

I am using ng2-dragula and have gone through all the stuff.

My problem is, When i drag one card from one tile, it is going to another tile but present card on that tile is not taking the position of previous card.

I have implemented this by adding tiles component in which I have import flyer component. Then I am using text field from tile to map position of flyer from flyer array and if there is no position in flyer, i am filling that tile with blank card.

Please help me to get this done. I would be highly obliged. Is there any other way to do this? I am trying to use all the things mentioned in https://valor-software.com/ng2-dragula/ but nothing is working.

Below is my code.

Raster.component.ts

<mat-grid-list>
    <mat-grid-tile *ngFor="let tile of this.tiles" [colspan]="tile.cols" [rowspan]="tile.rows" >
        <mat-card *ngIf="tile.flyer == '-1'">
            .....blank card.....
        </mat-card>
        <mat-card class="flyer-card" *ngIf="tile.flyer !== '-1'" dragula="TILES" [(dragulaModel)]="tiles">
            ......Flyer cards.....
        </mat-card>
    <mat-grid-tile>
</mat-card-list>

Raster.component.ts

MANY_ITEMS = 'MANY_ITEMS';
subs = new Subscription();
public constructor(private dragulaService: DragulaService) {
    dragulaService.createGroup("HANDLES", {
      moves: (el, container, handle) => {
        return handle.className === 'handle';
      }
    });
  }
  assignFlyertoTiles() {
    for (const tile of this.tiles) {
      for (let i = 1; i < this.flyers.length; i++) {
        if (tile.text === this.flyers[i].Pos) {
          tile.flyer = i.toString();
        }
      }
    }
  }