I integrated a new angular 2 library into my application called "angular2-grid". This library is located within the node_modules folder.
Furthermore, I created a service as shown below:
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import {NgGrid, NgGridItem, NgGridConfig, NgGridItemConfig, NgGridItemEvent} from 'angular2-grid';
@Injectable()
export class WidgetService {
private _widgetUrl = './assets/gridConfig.json';
constructor(private _http: Http) { }
getWidgets(): Observable<NgGridConfig> {
return this._http.get(this._widgetUrl)
.map(res=>res.json())
.do(data => console.log("All: " + JSON.stringify(data)))
.catch(this.handleError);
}
// additional code can be placed here
The interface for NgGridConfig is defined as follows
export interface NgGridConfig {
margins?: number[];
draggable?: boolean;
resizable?: boolean;
max_cols?: number;
max_rows?: number;
visible_cols?: number;
visible_rows?: number;
min_cols?: number;
min_rows?: number;
col_width?: number;
row_height?: number;
cascade?: string;
min_width?: number;
min_height?: number;
fix_to_grid?: boolean;
auto_style?: boolean;
auto_resize?: boolean;
maintain_ratio?: boolean;
prefer_new?: boolean;
zoom_on_drag?: boolean;
limit_to_screen?: boolean;
}
I have set values for some properties in the gridCongig.json file
In my component, the following code is implemented:
import { Component, ViewEncapsulation,OnInit } from '@angular/core';
import {NgGrid, NgGridItem, NgGridConfig, NgGridItemConfig, NgGridItemEvent} from 'angular2-grid';
import {IBox} from './grid'
import {WidgetService} from './grid.service'
@Component({
templateUrl: './grid.component.html',
styleUrls: ['./grid.component.css'],
})
export class GridComponentDemo {
private boxes: Array<IBox> = [];
private rgb: string = '#efefef';
private curNum;
imageWidth: number= 50;
imageMargin: number=2;
widgets: Array<IWidgets> = [];
errorMessage: string;
private itemPositions: Array<any> = [];
ngGridConfig : NgGridConfig;
constructor (private _widgetService: WidgetService) {
}
ngOnInit(): void {
this._widgetService.getWidgets()
.subscribe(ngGridConfig=>this.ngGridConfig=ngGridConfig,
error => this.errorMessage = <any>error);
const dashconf = this._generateDefaultDashConfig();
for (var i = 0; i < dashconf.length; i++) { //6
const conf = dashconf[i];
conf.payload = 1 + i;
this.boxes[i] = { id: i + 1, config: conf,name: "widget " + conf.payload + " :"};
}
this.curNum = dashconf.length + 1;
}
Upon running the application, the following output is displayed in the console
All: [{"margins":[5],"draggable":true,"resizable":true,"max_cols":0,"max_rows":0,"visible_cols":0,"visible_rows":0,"min_cols":1,"min_rows":1,"col_width":2,"row_height":2,"cascade":"up","min_width":50,"min_height":50,"fix_to_grid":false,"auto_style":true,"auto_resize":false,"maintain_ratio":false,"prefer_new":false,"zoom_on_drag":false,"limit_to_screen":true}]
This indicates that the service call and json file mapping are functioning correctly due to the desired output obtained from the do method.
However, it seems there may be an issue with the subscribe function since the property ngGridConfig of type NgGridConfig remains empty. This was identified when inspecting the value using
console.log(this.ngGridConfig.min_rows)undefined.
I am seeking assistance on how to ensure that my property ngGridConfig retrieves all the mapped values from the service?