Comments (10)
Hey,
you can use something like:
<gridster [options]="options.options" [draggableOptions]="options.draggableOptions" style="min-height: 500px;">
<gridster-item *ngFor="let item of options.items; let indx = index" [(x)]="item.x" [(y)]="item.y" [(w)]="item.w" [(h)]="item.h">
<ng-container *ngComponentOutlet="item.widgetComponent"> </ng-container>
</gridster-item>
</gridster>
ngComponentOutlet allows you to load a component dynamically. So you can have a bunch of components (in my case it's dashboard widgets) and render them.
Part of my code, might be helpful
import { DashboardGridOptions } from './../common/dashboard/grid/dashboard.grid.options';
import { InventoryWidgetComponent } from './widget/invetory-widget.component';
import { LiveWidgetComponent } from './widget/live-widget.component';
export class AppSettings {
public static gridOptions: DashboardGridOptions = {
options: {
lanes: 12,
widthHeightRatio: 0.5,
direction: 'vertical',
dragAndDrop: true,
resizable: true
},
draggableOptions: {
handlerClass: 'widget-heading'
},
items: [
{w: 7, h: 1, y: 0, x: 0, widgetComponent: InventoryWidgetComponent, widgetOptions: {title: 'INVENTORY_WIDGET'}},
{w: 5, h: 1, y: 0, x: 7, widgetComponent: LiveWidgetComponent, widgetOptions: {title: 'LIVE_WIDGET'}}
]
};
}
from angular2gridster.
Thank you for the quick reply. I am getting compilation error at DashboardGridOptions.
I added "<gridster [options]="options..." code in app.component.html . And below code in app.component.ts file. Is this correct? Could you please help me in resovling compilation issue.
Thanks,
Avanthika.
from angular2gridster.
In my case i have not only dashboard components few others also need to load in the widget. And whenever there is change in one widget content the dependent data should change in other widgets.
from angular2gridster.
DashboardGridOptions is my custom settings class for my dashboard module. It's not app.component.ts file. Just an example of how I store a list of widgets.
Here is a small example showing the idea:
....
import { Widget1Component } from './widget/widget1.component';
import { Widget2Component} from './widget/widget2.component';
etc
....
@Component({
selector: 'widget-grid',
template: `
<h1>Widgets</h1>
<gridster [options]="options" [draggableOptions]="draggableOptions" style="min-height: 500px;">
<gridster-item *ngFor="let item of items; let indx = index" [(x)]="item.x" [(y)]="item.y" [(w)]="item.w" [(h)]="item.h">
<ng-container *ngComponentOutlet="item.widgetComponent"> </ng-container>
</gridster-item>
</gridster>
`
})
export class App {
items = [
{w: 7, h: 1, y: 0, x: 0, widgetComponent: Widget1Component}},
{w: 5, h: 1, y: 0, x: 7, widgetComponent: Widget2Component}}
];
options = { ... };
draggableOptions = { ... };
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App, Widget1Component, Widget2Component],
entryComponents: [Widget1Component, Widget2Component],
bootstrap: [ App ]
})
export class AppModule {}
To communicate between components (widgets) you may need to implement a shared service and inject it to all widget you want to listen or send messages.
from angular2gridster.
Thank you for the reply.
Its good to update the repository with component loading code. Faced few issues with items.
Now I am able to load the component.
from angular2gridster.
Its not allowing us to write to input text field if the component is having input text fields in widget. Do we need to change anything for this ? could you please help me on this.
Thanks,
Avanithika.
from angular2gridster.
Read this article: https://angular.io/docs/ts/latest/cookbook/component-communication.html
Section you need called "Parent and children communicate via a service"
from angular2gridster.
Regarding appending components to widgets content @dipcore (big thanks for that 👍 ) provides comprehensive information and there is nothing to add. Even then I will provide some tutorial for that in Wiki page.
Regarding input element in the widget I can not reproduce a problem. Can you write some more information how to reproduce it?
from angular2gridster.
Thank you for the reply swiety85. I was facing 2 issues listed below :
-
When I try to create a new component with the instructions given like
@component({
selector: 'widget-grid',
template: <h1>Widgets</h1> <gridster [options]="options" [draggableOptions]="draggableOptions" style="min-height: 500px;"> <gridster-item *ngFor="let item of items; let indx = index" [(x)]="item.x" [(y)]="item.y" [(w)]="item.w" [(h)]="item.h"> <ng-container *ngComponentOutlet="item.widgetComponent"> </ng-container> </gridster-item> </gridster>
})
I was getting error with root selector.
- In other way i was able to add the component. but button clicks are working fine but not input forms.
I am uploading my test project. Please have a look where input field issue is reproducible.
VSFirstTestProject.zip
Please have a look and help me on the same.
from angular2gridster.
Ok, now I see the problem.
Focus on input is blocked because code responsible for dragging calls preventDefault()
on click event on drag handler (in your case whole widget). I will try to fix it soon.
As a temporary solution you could add drag handlers that doesn't contain form fields (by gridsterDraggableOptions.handlerClass
) e.g. like on demo page.
from angular2gridster.
Related Issues (20)
- emitter for currently selected or clicked or active gridster item
- ERROR on creating gridster inside mat tab group
- npm start not working after installation of code HOT 5
- reloading grids sometimes makes heights size 1
- Provide service using { providedIn: 'root' } HOT 1
- Error when deploying angular 9 app to dev server (My bad)
- Angular 11 support HOT 2
- Angular 12 Support? HOT 1
- How to load the grid without dragAndDrop and Resize
- widget width not increase, need help
- When I use draggableOptions,I think have an ignoreContentClass option maybe is better?
- Angular 13 support HOT 1
- Can't bind to config
- Fix peerDependencies HOT 4
- Question: Is this project abandoned?
- Resizing from the top does not update the position until finished.
- Resizing does not correctly scroll when the scroll container is the body
- Focus and reading order is not as per the visual order
- Clicking and dragging the horizontal/vertical scroll bar no longer works
- There is a minute gap between 2 gridster Item even though margin set as zero and the gap is not consistent in all the items. How to resolve this gap issue
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular2gridster.