package.json
"@angular/animations": "^7.2.2",
"@types/moment": "^2.13.0",
"@angular/cdk": "^7.2.2",
"@angular/service-worker": "^7.2.2",
"moment": "^2.22.2",
"@angular/http": "^7.2.2",
"ionicons": "^4.4.4",
app.module.ts
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { JsonpModule, Jsonp, Response } from '@angular/http';
imports: [
BrowserModule,
BrowserAnimationsModule,
DragDropModule,
FormsModule,
AuthModule.forRoot(),
AppRoutingModule,
HttpClientModule,
JsonpModule,
ReactiveFormsModule]
providers: [
ApiService
]
my-component.ts
import {
Component,
OnInit,
ChangeDetectorRef,
ViewChildren,
ViewEncapsulation,
QueryList, ViewChild, ElementRef, Inject, Renderer2, EventEmitter, Output
} from '@angular/core';
import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
import { ReactiveFormsModule, FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { Router, ActivatedRoute, Params, Data } from '@angular/router';
import { Title } from '@angular/platform-browser';
import * as moment from 'moment';
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
import { combineLatest } from 'rxjs';
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.dayResults, event.previousIndex, event.currentIndex);
this.swapOrder(
{ item: this.dayResults[event.previousIndex],
order: event.previousIndex },
{item: this.dayResults[event.currentIndex],
order: event.currentIndex }
);
}
my-component.html
<ul class="activity-list margin-v-0" cdkDropList (cdkDropListDropped)="drop($event)">
<li class="task-item" cdkDrag *ngFor="let result of dayResults" [type]="'current'" [projects]="projects" [task]="result" (changed)="onTasksChanged('day')"> </li>
</ul>
Created on 3/7/2019