Building Materials / Drag CDK and Drop
Building Materials / Drag CDK and Drop
A new drag and drop feature added to the Angular 7 CDK helps drag and drop items onto the list. We will understand the function of the Drag and Drop Module with the help of an example. Feature added to cdk. We need to first download the dependency as shown below -
npm to install @ angular / cdk --save
Once the above step has been done. Let's download the drag and drop module to app.module.ts as shown below -
Once the above step has been done. Let's download the drag and drop module to app.module.ts as shown below -
Example:
<![CDATA[
import {BrowserModule} from '@ angular / platform-browser';
import {Module} from '@ angular / core';
import {AppRoutingModule, RoutingComponent} from './app-routing.module';
import {AppComponent} from './app.component';
import {NewCmpComponent} from './new-cmp/new-cmp.component';
import {ChangeTextDirective} from './change-text.directive';
import {SqrtPipe} from './app.sqrt';
import {MyserviceService} from './myservice.service';
import {HttpClientModule} from '@ angular / common / http';
import {ScrollDispatchModule} from '@ angular / cdk / scrolling';
import {DragDropModule} from '@ angular / cdk / drag-drop';
@NgModule ({
announcements: [
Sqrt Pipeline,
AppComponent,
NewCmpComponent,
ChangeTextDirective,
RouteComponent
],
import:
Browser Module,
AppRoutingModule,
HttpClientModule,
ScrollDispatchModule,
DragDropModule
],
providers: [MyserviceService],
bootstrap: [AppComponent]
})
Export AppModule {}
]]>
DragDropModule imported from '@ angular / cdk / drag-drop' and the module can be added to the import list as shown above.
We will use information from the api, (http://jsonplaceholder.typicode.com/users) which will be displayed on the screen. We have a service that will download data from the api as shown below -
<![CDATA[
myservice.service.ts
import {Injectable} from '@ angular / core';
import {HttpClient} from '@ angular / common / http';
Injectable ({
DependedIn: 'root'
})
Export the MyserviceService section {
private finaldata = [];
private apiurl = "http://jsonplaceholder.typicode.com/users";
builder (private http: HttpClient) {}
GetData () {
replace this.http.get (this.apiurl);
}
}
]]>
When you are done call the service within app.component.ts as shown below -
<![CDATA[
import {Component} from '@ angular / core';
import {MyserviceService} from './myservice.service';
@Part ({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export AppComponent section {
title = 'Angular 7 Project!';
public personal information = [];
builder (private service: MyserviceService) {}
by OnInit () {
le.myservice.getData (). register ((data) => {
this.personaldetails = Array.from (Object.keys (data), k => data [k]);
console.log (this is personal information);
});
}
}
]]>
We have the necessary information available through the flexibility of personal information. Now let's use the same to show the user as shown below -
<![CDATA[
<h3> Angular 7 - Drag and drop Module </h3>
<div>
<div * ngFor = "let personal information item; let i = index" class = "divlayout">
{{item.name}}
</div>
</div>
We added the class = "divlayout" and section details in app.component.css.
.divided {
width: 40%;
background color: #ccc;
margin-bottom: 5px;
packing: 10px 10px;
border: 3px solid # 73AD21;
}
]]>
