title: Generate number of mat-cards depending on te user
body: <p>I got simple mat-cards where I got Drag and drop:</p>
  <pre><code>&lt;div id=&quot;pagewrapper&quot;&gt;
    &lt;section class=&quot;todos-section-wrapper&quot;&gt;
  
      &lt;mat-card class=&quot;card&quot;&gt;
        &lt;mat-card-header class=&quot;card-header&quot;&gt;
          &lt;mat-card-title class=&quot;card-title&quot;&gt;Team&lt;/mat-card-title&gt;
        &lt;/mat-card-header&gt;
        &lt;mat-card-content class=&quot;card-content&quot;&gt;
  
          &lt;div cdkDropList #todoList=&quot;cdkDropList&quot; [cdkDropListData]=&quot;todos&quot; [cdkDropListConnectedTo]=&quot;[completedList, roomOneList]&quot;
            class=&quot;list&quot; (cdkDropListDropped)=&quot;drop($event)&quot;&gt;
            &lt;div class=&quot;todo-item&quot; *ngFor=&quot;let todo of todos&quot; cdkDrag&gt;{{todo}}&lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/mat-card-content&gt;
      &lt;/mat-card&gt;
  
      &lt;mat-card class=&quot;card&quot;&gt;
        &lt;mat-card-header class=&quot;card-header&quot;&gt;
          &lt;mat-card-title class=&quot;card-title&quot;&gt;Room 1&lt;/mat-card-title&gt;
        &lt;/mat-card-header&gt;
        &lt;mat-card-content class=&quot;card-content&quot;&gt;
  
          &lt;div cdkDropList #completedList=&quot;cdkDropList&quot; [cdkDropListData]=&quot;completed&quot;
            [cdkDropListConnectedTo]=&quot;[todoList, roomOneList]&quot; class=&quot;list&quot; (cdkDropListDropped)=&quot;drop($event)&quot;&gt;
            &lt;div class=&quot;todo-item&quot; *ngFor=&quot;let roomTwo of completed&quot; cdkDrag&gt;{{roomTwo}}&lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/mat-card-content&gt;
      &lt;/mat-card&gt;
  
      &lt;mat-card class=&quot;card&quot;&gt;
        &lt;mat-card-header class=&quot;card-header&quot;&gt;
          &lt;mat-card-title class=&quot;card-title&quot;&gt;Room 2&lt;/mat-card-title&gt;
        &lt;/mat-card-header&gt;
        &lt;mat-card-content class=&quot;card-content&quot;&gt;
  
          &lt;div cdkDropList #roomOneList=&quot;cdkDropList&quot; [cdkDropListData]=&quot;roomOne&quot;
            [cdkDropListConnectedTo]=&quot;[completedList, todoList]&quot;
            class=&quot;list&quot; (cdkDropListDropped)=&quot;drop($event)&quot;&gt;
            &lt;div class=&quot;todo-item&quot; *ngFor=&quot;let roomOne of roomOne&quot; cdkDrag&gt;{{roomOne}}&lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/mat-card-content&gt;
      &lt;/mat-card&gt;
  
  
    &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and there is my app.componen.ts</p>
  <pre><code>import { Component } from '@angular/core';
  import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent {
  
    todos: string[] = [
      'Jan Nowak',
      'Jan Kowalski',
      'Monika Nowak',
      'Radek Testowy',
      'Marek Tester',
      'Marian Kowalski'
    ];
  
    completed: string[] = [
      'Marek Pospieszalski'
    ];
  
    roomOne: string[] = [
      'Mariusz Kowalski'
    ];
  
  
    drop(event: CdkDragDrop&lt;string[]&gt;) {
  
      if (event.previousContainer === event.container) {
  
        moveItemInArray(
          event.container.data,
          event.previousIndex,
          event.currentIndex
        );
  
      } else {
  
        transferArrayItem(
          event.previousContainer.data,
          event.container.data,
          event.previousIndex,
          event.currentIndex
        );
  
      }
  
      console.log('todos: '+this.todos);
      console.log('completed: '+this.completed);
      console.log('roomOne: ' + this.roomOne);
      
    }
    
   
  }
  </code></pre>
  <p>Actually I got 2 mat-card: Room 1 and Room 2
  My goal is to achive that I got simple user inputer where I can ask how many rooms you want, then user type for example 4 rooms and he got 4 <strong>mat-cards</strong>
  Then he can put people in the rooms.</p>
  <p>How Can I dynamically generate mat-cards?</p>