Les dejo las partes de código para copiar y pegar

task-page.component.html

<app-header></app-header>
<div class="task-columns">
  <app-column [cardTitle]="item.label" [dataCards]="item.list" 
  *ngFor="let item of groupCard">
  </app-column>
</div>

task-page.component.css

.imagen {
  width: 200px;
  height: 200px;
  background-color: rgb(205, 205, 255);
}

.task-columns {
  position: relative;
  /* background-color: rgba(255, 0, 0, 0.103); */
  display: flex;
  flex-wrap: wra;
  flex-direction: row;
  gap: .25rem;
  overflow-x: auto;
  min-height: 500px;
  padding: 0 1rem;
}

.cdk-drag-placeholder {
  position: relative;
  opacity: 1;
  display: block;
  width: 20rem;
  transition: all ease 230ms;
  cursor: move;
  border-radius: 15px;
}

.cdk-drag-placeholder:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #DFDEDC;
  border-radius: 15px;
  top: 0;
  left: 0;
}

.cdk-drag-preview {
  display: block;
  width: 500px;
  transition: all ease 150ms;
  border-radius: 15px;
  background-color: transparent;
}

.cdk-drag-preview {
  background-color: var(--color-secondary);
  transition: all ease 150ms;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}


/* Animate items as they're being sorted. */

.cdk-drop-list-dragging .cdk-drag {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}


/* Animate an item that has been dropped. */

.cdk-drag-animating {
  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
}

task-page.component.ts

groupCard:Array<any> = []
  
  //para destruir las subscripciones
  listObservables$:Array<Subscription> = []

const observer1$ = interval(1000).subscribe(res => {
      console.log('Corriendo')
    })

    this.listObservables$ = [observer1$]

    console.log(this.groupCard.length)

    this.groupCard = [
      {
        label: 'Hola Mundo',
        color: 'tomato',
        list: [
          {
            order: 'Como instalar Angular',
            items: [
              {
                key:'price',
                value: 152
              },
              {
                key:'time',
                value: 152
              },
              {
                key:'author',
                value: {
                  name: 'Leifer Mendez',
                  avatar: ''
                }  
              }
            ]
          }
        ]
      },
      {
        label: 'Nuevos',
        color: 'tomato',
        list: [
          {
            order: 'Como instalar Angular',
            items: [
              {
                key:'price',
                value: 152
              },
              {
                key:'time',
                value: 152
              },
              {
                key:'author',
                value: {
                  name: 'Leifer Mendez',
                  avatar: ''
                }  
              }
            ]
          }
        ]
      }
    ]

column.component.css

:host {
  display: block;
}

.column {
  padding: .5rem;
  width: 20rem;
  justify-content: space-between;
}

.column .circle {
  width: 15px;
  height: 15px;
  border-radius: 30px;
}

.column .label-column {
  gap: .5rem
}

.column .name {
  font-weight: 500;
}

.column .number {
  font-weight: 400;
  opacity: .8;
}

.cdk-drag-placeholder {
  position: relative;
  opacity: 1;
  display: block;
  width: 100%;
  transition: all ease 230ms;
  cursor: move;
  border-radius: 15px;
}

.cdk-drag-placeholder:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #DFDEDC;
  border-radius: 15px;
  top: 0;
  left: 0;
}

.cdk-drag-preview {
  display: block;
  width: 500px;
  transition: all ease 150ms;
  border-radius: 15px;
  background-color: transparent;
}

.cdk-drag-preview .card {
  transition: all ease 150ms;
  transform: rotate(3deg);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

column.component.html

<div class="column display-flex">
  <div class="label-column display-flex">
    <span class="circle" [style.backgroundColor]="'red'"></span>
    <span class="name">
      {{ cardTitle }} <span class="number">({{dataCards.length}})</span>
    </span>
  </div>
  <div class="label-column display-flex"></div>
</div>

<div class="column">
  <app-card cdkDrag 
      [idOrder]="card.order"
      [items]="card.items" 
      *ngFor="let card of dataCards" >
  </app-card>
</div>

column.component.ts

// 5.4
  <a href="/u/Input" data-community-mention="USER" data-community-mention-slug="Input">@Input</a>() dataCards:Array<any> = []
  <a href="/u/Input" data-community-mention="USER" data-community-mention-slug="Input">@Input</a>() cardTitle!:string

card.component.css

:host {
  display: block;
}

.card {
  background-color: white;
  border-radius: 3px;
  margin-bottom: 1rem;
  min-height: 100px;
  padding: .75rem
}

.card .title {
  font-weight: 600;
}

.card .body {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem
}

.card .body li {
  display: flex;
  gap: .25rem;
  font-size: 90%;
}

.card .body li span {
  font-weight: 400;
}

.card .avatar-small {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  object-fit: cover;
}

card.component.html

<div class="card">
  <div class="title"> N° {{idOrder}}</div>
  <ul class="body">
      <ng-container *ngFor="let item of items">
       
          <li *ngIf="['price','time'].includes(item.key)">
              <i class="uil" [ngClass]="{
                  'uil-credit-card':item.key == 'price',
                  'uil-clock':item.key == 'time'
              }"></i>
              <span>{{item.value}}</span>
          </li>
          <li *ngIf="['author'].includes(item.key)" >
            <img class="avatar-small" [src]="item.value.avatar" alt="">
            <span>{{item.value.name}}</span>
          </li>
   
      </ng-container>

  </ul>
</div>

card.component.ts

<a href="/u/Input" data-community-mention="USER" data-community-mention-slug="Input">@Input</a>() idOrder:string|number = 0
  <a href="/u/Input" data-community-mention="USER" data-community-mention-slug="Input">@Input</a>() items:Array<any> = []