title: CdkDropList table
body: <p>I am trying to generate a table which consist of users and their userstories, and the headers consist of the current status they are in.
  Now I would like to create CdkDropLists for the entire table so that I can move userstories between users and different statuses. However I am struggling to connect all these lists together. I would like to have a list of all my CdkDropLists available in my HTML so that I can connect them to eachother.</p>
  
  <p>I looked around on the internet for solutions, but I find it difficult to come up with one.</p>
  
  <p>For now all lists have the same #name, but I required the ability to generate names and link all those lists together. So that the Drag and Drop functionality works within the table.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;to do&lt;/th&gt;&lt;th&gt;doing&lt;/th&gt;&lt;th&gt;test&lt;/th&gt;&lt;th&gt;done&lt;/th&gt;&lt;/tr&gt;
    &lt;tr *ngFor="let user of users"&gt;&lt;td&gt;{{user.name}}&lt;/td&gt;
      &lt;td *ngFor="let status of status"&gt;
        &lt;div cdkDropList
             [cdkDropListData]="getStatusStories(user.id, status.name)"
             [cdkDropListConnectedTo]="unasignedList"
             (cdkDropListDropped)="onDrop($event, user.id, status.name)"
             #dropList="cdkDropList" style="width: 25%; border: 1px solid black;"&gt;
           &lt;div cdkDrag *ngFor="let story of getStatusStories(user.id, status.name)" class="item"&gt;{{story.name}}&lt;/div&gt;
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>private sprints: Sprint[];
  private userStories: Userstory[];
  private users: User[];
  private status: Status[] = [
    { id: "1", name: "to do" } as Status,
    { id: "2", name: "doing" } as Status,
    { id: "3", name: "test" } as Status,
    { id: "4", name: "done" } as Status
  ];
  
  ngOnInit() {
    this.firebaseService.getSprints().subscribe(sprints =&gt; (this.sprints = sprints));
    this.firebaseService.getStories().subscribe(stories =&gt; (this.userStories = stories));
    this.firebaseService.getUsers().subscribe(users =&gt; (this.users = users));
  }
  
  getStatusStories(userId: string, statusName: string): Userstory[] {
    const filteredStories = [];
    this.userStories.forEach(element =&gt; {
      if (element.status === statusName &amp;&amp; element.user_id === userId) {
        filteredStories.push(element);
      }
    });
    return filteredStories;
  }
  </code></pre>