Not able to add the component to content about angular2gridster HOT 10 CLOSED

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 :

1.  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.

2. 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.