---
title: "ModelComponent | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent/"
---

# ModelComponent

> - [`Swatch`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Swatch.md#swatch)
> - [`Margin`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Margin.md#margin)
> - [`Container`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Container.md#container)
> - [`InteractiveZone`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/InteractiveZone.md#interactivezone)
> - [`EncodingOptions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/BarcodeItem.md#encodingoptions)
> - [`BaseItem`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/BaseItem.md#baseitem)
> - [`FontSettings`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/BaseTextItem.Namespace.BaseTextItem.md#fontsettings)
> - [`InStringPlaceholder`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/InStringPlaceholder.md#instringplaceholder)
> - [`ViolationSettings`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ViolationSettings.md#violationsettings)
> - [`PrintArea`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/PrintArea.md#printarea)
> - [`Product`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Product-1.md#product)
> - [`Surface`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Surface.md#surface)
> - [`SurfaceMockup`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/SurfaceMockup.md#surfacemockup)

## Classes

### `abstract` ModelComponent

#### Extended by

#### Implements

- [`INotifyPropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#inotifypropertychanged)\<[`ModelComponent`](#abstract-modelcomponent), `string`\>

#### Constructors

##### Constructor

```ts
new ModelComponent(id?, name?): ModelComponent;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `id?` | `string` | `undefined` |
| `name?` | `string` | `""` |

###### Returns

[`ModelComponent`](#abstract-modelcomponent)

#### Properties

##### id

```ts
id: string;
```

#### Accessors

##### name

###### Get Signature

```ts
get name(): string;
```

###### Returns

`string`

###### Set Signature

```ts
set name(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `string` |

###### Returns

`void`

##### tags

###### Get Signature

```ts
get tags(): object;
```

###### Returns

`object`

###### Set Signature

```ts
set tags(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | \{ \[`key`: `string`\]: `any`; \} |

###### Returns

`void`

##### version

###### Get Signature

```ts
get version(): string;
```

###### Returns

`string`

#### Methods

##### addPropertyChanged()

```ts
addPropertyChanged(listener): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `listener` | (`sender`, `eventArgs`) => `void` |

###### Returns

`void`

###### Implementation of

[`INotifyPropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#inotifypropertychanged).[`addPropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#addpropertychanged)

##### equals()

```ts
equals(other): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `other` | [`ModelComponent`](#abstract-modelcomponent) |

###### Returns

`boolean`

##### generateNewIds()

```ts
generateNewIds(): void;
```

###### Returns

`void`

##### getSimplifiedObject()

```ts
getSimplifiedObject(omitProperties?): object;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `omitProperties?` | `string` \| `string`[] |

###### Returns

`object`

##### removePropertyChanged()

```ts
removePropertyChanged(listener): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `listener` | (`sender`, `eventArgs`) => `void` |

###### Returns

`void`

###### Implementation of

[`INotifyPropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#inotifypropertychanged).[`removePropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#removepropertychanged)

##### toString()

```ts
toString(): string;
```

Returns a string representation of an object.

###### Returns

`string`