Códigos de la clase
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: <a href="/comunidad/publicaciones?q=%23DFDEDC" data-community-hashtag="true">#DFDEDC</a>;
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: <a href="/comunidad/publicaciones?q=%23DFDEDC" data-community-hashtag="true">#DFDEDC</a>;
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> = []