Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/davidmartinezros/bind-json-array-to-draggable-portlets
Bind Json Array to Draggable Portlets: The component is an easy representation of a webpage structurate in draggable portlets binding with a json file. It could be useful for a notice portal or a webpage the need to interchange them content.
https://github.com/davidmartinezros/bind-json-array-to-draggable-portlets
angular angular7 bind draggable json portlets
Last synced: 19 days ago
JSON representation
Bind Json Array to Draggable Portlets: The component is an easy representation of a webpage structurate in draggable portlets binding with a json file. It could be useful for a notice portal or a webpage the need to interchange them content.
- Host: GitHub
- URL: https://github.com/davidmartinezros/bind-json-array-to-draggable-portlets
- Owner: davidmartinezros
- License: mit
- Created: 2019-06-22T14:43:02.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T06:37:42.000Z (about 2 years ago)
- Last Synced: 2024-11-27T19:09:35.438Z (about 1 month ago)
- Topics: angular, angular7, bind, draggable, json, portlets
- Language: JavaScript
- Homepage: https://plnkr.co/edit/REhfoeZ3CaoYOneY?preview
- Size: 5.36 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# DESCRIPTION
The component is an easy representation of a webpage structurate in draggable portlets binding with a json file.
It could be useful for a notice portal or a webpage the need to interchange them content.
## load bind json array to draggable portlets in an easy way with app-draggable-portlets-template
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) and is designed as a basic template combined with [Angular](https://angular.io/).
You can find me at https://davidmartinezros.com or contact in the email [email protected]
## youtube video
https://www.youtube.com/watch?v=UK95WlM-GMc
## demo using the component
https://davidmartinezros.github.io/DraggablePortletsTemplateDemo/
# how to use this component
You can use it as a component in your project adding the tag in your AppComponent, add the module AppDraggablePortletsTemplateModule and define the data json file.
Like this:
```
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppDraggablePortletsTemplateModule } from 'app-draggable-portlets-template';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppDraggablePortletsTemplateModule
],
bootstrap: [
AppComponent
]
})
export class AppModule { }
```
Then, you can define the data json file that loads all portlets.
Like this:
```
{
"columnsCount": 3,
"columns": [
{
"portlets" : [
{
"header": "Portlet header 1",
"content": "Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
]
},
{
"portlets" : [
{
"header": "Portlet header 2",
"content": "Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
},
{
"header": "Portlet header 3",
"content": "Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
]
},
{
"portlets" : [
{
"header": "Portlet header 4",
"content": "Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
]
}
]
}
```
Call the component into the html of the AppComponent with the route of your data json file:
```
```
## Demo Example
You can find the demo here: https://davidmartinezros.com/portfolio-full-stack-developer-software-engineer/project/en/draggable-portlets-with-angular