|
| 1 | +# base-widget |
| 2 | + |
| 3 | +## Classes |
| 4 | + |
| 5 | +### `abstract` BaseWidget |
| 6 | + |
| 7 | +Defined in: [angular/projects/lib/src/lib/base-widget.ts:39](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/base-widget.ts#L39) |
| 8 | + |
| 9 | +Base widget class for GridStack Angular integration. |
| 10 | + |
| 11 | +#### Constructors |
| 12 | + |
| 13 | +##### Constructor |
| 14 | + |
| 15 | +```ts |
| 16 | +new BaseWidget(): BaseWidget; |
| 17 | +``` |
| 18 | + |
| 19 | +###### Returns |
| 20 | + |
| 21 | +[`BaseWidget`](#basewidget) |
| 22 | + |
| 23 | +#### Methods |
| 24 | + |
| 25 | +##### serialize() |
| 26 | + |
| 27 | +```ts |
| 28 | +serialize(): undefined | NgCompInputs; |
| 29 | +``` |
| 30 | + |
| 31 | +Defined in: [angular/projects/lib/src/lib/base-widget.ts:66](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/base-widget.ts#L66) |
| 32 | + |
| 33 | +Override this method to return serializable data for this widget. |
| 34 | + |
| 35 | +Return an object with properties that map to your component's @Input() fields. |
| 36 | +The selector is handled automatically, so only include component-specific data. |
| 37 | + |
| 38 | +###### Returns |
| 39 | + |
| 40 | +`undefined` \| [`NgCompInputs`](types.md#ngcompinputs) |
| 41 | + |
| 42 | +Object containing serializable component data |
| 43 | + |
| 44 | +###### Example |
| 45 | + |
| 46 | +```typescript |
| 47 | +serialize() { |
| 48 | + return { |
| 49 | + title: this.title, |
| 50 | + value: this.value, |
| 51 | + settings: this.settings |
| 52 | + }; |
| 53 | +} |
| 54 | +``` |
| 55 | + |
| 56 | +##### deserialize() |
| 57 | + |
| 58 | +```ts |
| 59 | +deserialize(w): void; |
| 60 | +``` |
| 61 | + |
| 62 | +Defined in: [angular/projects/lib/src/lib/base-widget.ts:88](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/base-widget.ts#L88) |
| 63 | + |
| 64 | +Override this method to handle widget restoration from saved data. |
| 65 | + |
| 66 | +Use this for complex initialization that goes beyond simple @Input() mapping. |
| 67 | +The default implementation automatically assigns input data to component properties. |
| 68 | + |
| 69 | +###### Parameters |
| 70 | + |
| 71 | +| Parameter | Type | Description | |
| 72 | +| ------ | ------ | ------ | |
| 73 | +| `w` | [`NgGridStackWidget`](types.md#nggridstackwidget) | The saved widget data including input properties | |
| 74 | + |
| 75 | +###### Returns |
| 76 | + |
| 77 | +`void` |
| 78 | + |
| 79 | +###### Example |
| 80 | + |
| 81 | +```typescript |
| 82 | +deserialize(w: NgGridStackWidget) { |
| 83 | + super.deserialize(w); // Call parent for basic setup |
| 84 | + |
| 85 | + // Custom initialization logic |
| 86 | + if (w.input?.complexData) { |
| 87 | + this.processComplexData(w.input.complexData); |
| 88 | + } |
| 89 | +} |
| 90 | +``` |
| 91 | + |
| 92 | +#### Properties |
| 93 | + |
| 94 | +| Property | Modifier | Type | Description | Defined in | |
| 95 | +| ------ | ------ | ------ | ------ | ------ | |
| 96 | +| <a id="widgetitem"></a> `widgetItem?` | `public` | [`NgGridStackWidget`](types.md#nggridstackwidget) | Complete widget definition including position, size, and Angular-specific data. Populated automatically when the widget is loaded or saved. | [angular/projects/lib/src/lib/base-widget.ts:45](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/base-widget.ts#L45) | |
0 commit comments