# GC.Spread.Sheets.Designer.AtomicComponentBase

## Content

# Class: AtomicComponentBase<ValueType, OptionsType\>

[Sheets](../modules/GC.Spread.Sheets).[Designer](../modules/GC.Spread.Sheets.Designer).AtomicComponentBase

## Type parameters

| Name |
| :------ |
| `ValueType` |
| `OptionsType` |

## Table of contents

### Constructors

- [constructor](GC.Spread.Sheets.Designer.AtomicComponentBase#constructor)

### Methods

- [getTemplate](GC.Spread.Sheets.Designer.AtomicComponentBase#gettemplate)
- [onDestroy](GC.Spread.Sheets.Designer.AtomicComponentBase#ondestroy)
- [onEnableChanged](GC.Spread.Sheets.Designer.AtomicComponentBase#onenablechanged)
- [onInit](GC.Spread.Sheets.Designer.AtomicComponentBase#oninit)
- [onMounted](GC.Spread.Sheets.Designer.AtomicComponentBase#onmounted)
- [onValueChanged](GC.Spread.Sheets.Designer.AtomicComponentBase#onvaluechanged)
- [raiseValueChanged](GC.Spread.Sheets.Designer.AtomicComponentBase#raisevaluechanged)
- [updateValue](GC.Spread.Sheets.Designer.AtomicComponentBase#updatevalue)

## Constructors

### <a id="constructor" name="constructor"></a> constructor

• **new AtomicComponentBase**<`ValueType`, `OptionsType`\>(`host`, `options`)

Represent a abstract class define atomical component.

#### Type parameters

| Name |
| :------ |
| `ValueType` |
| `OptionsType` |

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `host` | `HTMLElement` | This is the HTML area that the Component mounts. |
| `options` | `OptionsType` | The component options. |

## Methods

### <a id="gettemplate" name="gettemplate"></a> getTemplate

▸ **getTemplate**(`options`): `string`

set inner html here. will invoke when mount host to DOM.

#### Parameters

| Name | Type |
| :------ | :------ |
| `options` | `OptionsType` |

#### Returns

`string`

___

### <a id="ondestroy" name="ondestroy"></a> onDestroy

▸ **onDestroy**(`host`): `void`

invoke when component will destroy.

#### Parameters

| Name | Type |
| :------ | :------ |
| `host` | `HTMLElement` |

#### Returns

`void`

___

### <a id="onenablechanged" name="onenablechanged"></a> onEnableChanged

▸ **onEnableChanged**(`prevEnable`, `nextEnable`, `host`, `options`): `void`

Invoke this function when value status changed.

#### Parameters

| Name | Type |
| :------ | :------ |
| `prevEnable` | `boolean` |
| `nextEnable` | `boolean` |
| `host` | `HTMLElement` |
| `options` | `OptionsType` |

#### Returns

`void`

___

### <a id="oninit" name="oninit"></a> onInit

▸ **onInit**(`options`): `void`

invoke when component is initializing itself.

#### Parameters

| Name | Type |
| :------ | :------ |
| `options` | `OptionsType` |

#### Returns

`void`

___

### <a id="onmounted" name="onmounted"></a> onMounted

▸ **onMounted**(`host`, `options`): `void`

invoke when component's host is append to DOM tree.

#### Parameters

| Name | Type |
| :------ | :------ |
| `host` | `HTMLElement` |
| `options` | `OptionsType` |

#### Returns

`void`

___

### <a id="onvaluechanged" name="onvaluechanged"></a> onValueChanged

▸ **onValueChanged**(`prevValue`, `nextValue`, `host`, `options`): `void`

Invoke this function when enable status changed.

#### Parameters

| Name | Type |
| :------ | :------ |
| `prevValue` | `ValueType` |
| `nextValue` | `ValueType` |
| `host` | `HTMLElement` |
| `options` | `OptionsType` |

#### Returns

`void`

___

### <a id="raisevaluechanged" name="raisevaluechanged"></a> raiseValueChanged

▸ **raiseValueChanged**(): `void`

raise the value changed event to Designer, which will call the execute function of command.

#### Returns

`void`

___

### <a id="updatevalue" name="updatevalue"></a> updateValue

▸ **updateValue**(`host`, `options`): `ValueType`

get the latest component value. Invoked when framework needs component value.

#### Parameters

| Name | Type |
| :------ | :------ |
| `host` | `HTMLElement` |
| `options` | `OptionsType` |

#### Returns

`ValueType`