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

task-page.component.html

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

task-page.component.css

1.imagen {
2 width: 200px;
3 height: 200px;
4 background-color: rgb(205, 205, 255);
5}
6
7.task-columns {
8 position: relative;
9 /* background-color: rgba(255, 0, 0, 0.103); */
10 display: flex;
11 flex-wrap: wra;
12 flex-direction: row;
13 gap: .25rem;
14 overflow-x: auto;
15 min-height: 500px;
16 padding: 0 1rem;
17}
18
19.cdk-drag-placeholder {
20 position: relative;
21 opacity: 1;
22 display: block;
23 width: 20rem;
24 transition: all ease 230ms;
25 cursor: move;
26 border-radius: 15px;
27}
28
29.cdk-drag-placeholder:after {
30 content: "";
31 position: absolute;
32 width: 100%;
33 height: 100%;
34 background-color: #DFDEDC;
35 border-radius: 15px;
36 top: 0;
37 left: 0;
38}
39
40.cdk-drag-preview {
41 display: block;
42 width: 500px;
43 transition: all ease 150ms;
44 border-radius: 15px;
45 background-color: transparent;
46}
47
48.cdk-drag-preview {
49 background-color: var(--color-secondary);
50 transition: all ease 150ms;
51 box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
52}
53
54
55/* Animate items as they're being sorted. */
56
57.cdk-drop-list-dragging .cdk-drag {
58 transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
59}
60
61
62/* Animate an item that has been dropped. */
63
64.cdk-drag-animating {
65 transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
66}

task-page.component.ts

1 groupCard:Array<any> = []
2 
3 //para destruir las subscripciones
4 listObservables$:Array<Subscription> = []
5
6const observer1$ = interval(1000).subscribe(res => {
7     console.log('Corriendo')
8   })
9
10   this.listObservables$ = [observer1$]
11
12   console.log(this.groupCard.length)
13
14   this.groupCard = [
15     {
16       label: 'Hola Mundo',
17       color: 'tomato',
18       list: [
19         {
20           order: 'Como instalar Angular',
21           items: [
22             {
23               key:'price',
24               value: 152
25             },
26             {
27               key:'time',
28               value: 152
29             },
30             {
31               key:'author',
32               value: {
33                 name: 'Leifer Mendez',
34                 avatar: ''
35               }  
36             }
37           ]
38         }
39       ]
40     },
41     {
42       label: 'Nuevos',
43       color: 'tomato',
44       list: [
45         {
46           order: 'Como instalar Angular',
47           items: [
48             {
49               key:'price',
50               value: 152
51             },
52             {
53               key:'time',
54               value: 152
55             },
56             {
57               key:'author',
58               value: {
59                 name: 'Leifer Mendez',
60                 avatar: ''
61               }  
62             }
63           ]
64         }
65       ]
66     }
67   ]
68

column.component.css

1:host {
2 display: block;
3}
4
5.column {
6 padding: .5rem;
7 width: 20rem;
8 justify-content: space-between;
9}
10
11.column .circle {
12 width: 15px;
13 height: 15px;
14 border-radius: 30px;
15}
16
17.column .label-column {
18 gap: .5rem
19}
20
21.column .name {
22 font-weight: 500;
23}
24
25.column .number {
26 font-weight: 400;
27 opacity: .8;
28}
29
30.cdk-drag-placeholder {
31 position: relative;
32 opacity: 1;
33 display: block;
34 width: 100%;
35 transition: all ease 230ms;
36 cursor: move;
37 border-radius: 15px;
38}
39
40.cdk-drag-placeholder:after {
41 content: "";
42 position: absolute;
43 width: 100%;
44 height: 100%;
45 background-color: #DFDEDC;
46 border-radius: 15px;
47 top: 0;
48 left: 0;
49}
50
51.cdk-drag-preview {
52 display: block;
53 width: 500px;
54 transition: all ease 150ms;
55 border-radius: 15px;
56 background-color: transparent;
57}
58
59.cdk-drag-preview .card {
60 transition: all ease 150ms;
61 transform: rotate(3deg);
62 box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
63}

column.component.html

1<div class="column display-flex">
2 <div class="label-column display-flex">
3   <span class="circle" [style.backgroundColor]="'red'"></span>
4   <span class="name">
5     {{ cardTitle }} <span class="number">({{dataCards.length}})</span>
6   </span>
7 </div>
8 <div class="label-column display-flex"></div>
9</div>
10
11<div class="column">
12 <app-card cdkDrag 
13     [idOrder]="card.order"
14     [items]="card.items" 
15     *ngFor="let card of dataCards" >
16 </app-card>
17</div>

column.component.ts

1 // 5.4
2 @Input() dataCards:Array<any> = []
3 @Input() cardTitle!:string
4 

card.component.css

1:host {
2 display: block;
3}
4
5.card {
6 background-color: white;
7 border-radius: 3px;
8 margin-bottom: 1rem;
9 min-height: 100px;
10 padding: .75rem
11}
12
13.card .title {
14 font-weight: 600;
15}
16
17.card .body {
18 list-style: none;
19 margin: 0;
20 padding: 0;
21 display: flex;
22 flex-direction: column;
23 gap: .35rem
24}
25
26.card .body li {
27 display: flex;
28 gap: .25rem;
29 font-size: 90%;
30}
31
32.card .body li span {
33 font-weight: 400;
34}
35
36.card .avatar-small {
37 width: 20px;
38 height: 20px;
39 border-radius: 5px;
40 object-fit: cover;
41}

card.component.html

1<div class="card">
2 <div class="title"> N° {{idOrder}}</div>
3 <ul class="body">
4     <ng-container *ngFor="let item of items">
5      
6         <li *ngIf="['price','time'].includes(item.key)">
7             <i class="uil" [ngClass]="{
8                 'uil-credit-card':item.key == 'price',
9                 'uil-clock':item.key == 'time'
10             }"></i>
11             <span>{{item.value}}</span>
12         </li>
13         <li *ngIf="['author'].includes(item.key)" >
14           <img class="avatar-small" [src]="item.value.avatar" alt="">
15           <span>{{item.value.name}}</span>
16         </li>
17  
18     </ng-container>
19
20 </ul>
21</div>

card.component.ts

1 @Input() idOrder:string|number = 0
2 @Input() items:Array<any> = []