# How to update a component

Components are changing constantly, for that reason is important to understand the structure of a component in order to customize Its functionality. This guide is about how to update our already created components with new events functions or properties.

A lot of events, methods and properties of our components extends from [ControlComponent](https://app.gitbook.com/s/-MEOm98BbzqckTUoLpXN/general/frontend/guides/winforms/base-components/control-mapper.md), this is the first place that we have to take as reference when we want to implement something new.  

![](/files/-MGA8yz9PBGT7-_kcbr3)

## Creating properties

There are some properties which do not extends from control, and belongs to a single component. Lets take numericUpDown component as example. This component has some properties that do not extends from `ControlComponent`.

1. We need find `NumericUpDown.ts` file.
2. Add new properties.

```typescript
  /**
   * @param value Contains the number of decimal places to display.
   */
  set decimalPlaces(value: number) {
    this.model.DecimalPlaces = value;
  }

  get decimalPlaces(): number {
    return this.model.DecimalPlaces;
  }

  /**
   * @param value  the value to increment or decrement the spin box.
   */
  set increment(value: number) {
    this.model.Increment = value;
  }

  get increment(): number {
    return this.model.Increment;
  }

  /**
   * @param value Contains the maximum value for the spin box.
   */
  set maximum(value: number) {
    this.model.Maximum = value;
  }

  get maximum(): number {
    return this.model.Maximum;
  }

  /**
   * @param value Contains the minimum allowed value for the spin box.
   */
  set minimum(value: number) {
    this.model.Minimum = value;
  }

  get minimum(): number {
    return this.model.Minimum;
  }
```

1. Some properties need a decorator on its setter to notify WebMap Service about the change.

```typescript
  /**
   * @param value Contains the value assigned to the spin box.
   */
  @NotifyChange('Value')
  set value(value: number) {
    this.model.Value = value;
  }
```

1. Binding on HTML.

Most of the time we have to bind those new properties on `html` file using proper angular structure.

```typescript
<kendo-numerictextbox [ngClass] ="class" wmControls
[disabled]="disabled"
[(value)]="value"
[min]="minimum" 
[max]="maximum"
[step]="increment"
[decimals]="decimalPlaces"
[format]="format"
(valueChange)="valueChanged($event)"
>
</kendo-numerictextbox>
```

### Updating properties

The way that we call every property is on `model.ts` file that you can find on every single component.

```typescript
export let model = {
    'DecimalPlaces': 0,
    'Enabled': true,
    'Increment': 3,
    'Maximum': 100,
    'Minimum': 0,
    'ProjectionId': '16',
    'UniqueID': 'n5m3r1c5pd0w4-c0mp0n3nt-05ds2sdf-0fd51dsf',
    'Value': 2
};
```

### Creating Events

Same as properties, there are some events that belongs to a specific component, events have the particularity of being emitted.

1. We have to declare the EventEmitter.

```typescript
  ValueChanged: EventEmitter<EventData> = new EventEmitter<EventData>();
```

&#x20;   2\. Declare the new function.

```typescript
  valueChanged(event: any): void {
    this.ValueChanged.emit(new EventData(event, this.id));
  }
```

&#x20;   3\. Some events need a decorator on its function to notify WebMap Service     about .

```typescript
  // Events
  @serverEvent('CheckedChanged')
  change(event: any): void {
    super.change(event);
    this.webmapService.core.getEvent().publish('unchecked', event);
    this.checked = event.target.checked;
    this.CheckedChanged.emit(new EventData(event, this.id));
  }
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gapvelocity.ai/webmap/general/frontend/guides/component-maintenance/how-to-update-a-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.