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, this is the first place that we have to take as reference when we want to implement something new.

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.

  /**
   * @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.

  /**
   * @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.

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

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.

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

2. Declare the new function.

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

3. Some events need a decorator on its function to notify WebMap Service about .

  // 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));
  }