# 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.  

![](https://4139013925-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEOm98BbzqckTUoLpXN%2F-MG9ivKNNYY11bUa5f0e%2F-MGA8yz9PBGT7-_kcbr3%2FcontrolComponent.gif?alt=media\&token=f295bb7f-8c86-407b-98c7-5251ef03a50f)

## 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));
  }
```