# Component Development

An Servoy component is just an Angular component read [this](https://angular.dev/guide/components) to get a bit familiar with angular component development.

Also read [this](https://github.com/Servoy/servoyworld_component?tab=readme-ov-file) to get more overview how a conversion of NG1 to TiNG component works, but that also explains more what the basic are of a Servoy Component.

Servoy components has the a component annotation as below:

```typescript
@Component({
    selector: 'bootstrapcomponents-textbox',
    templateUrl: './textbox.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
```

The selector should always be what the name is in the spec file of that component: "name": "bootstrapcomponents-textbox",

The templateUrl can be anything, it can also be an inline template if needed.

For Servoy Components the change detection can always just be [OnPush](https://angular.dev/api/core/ChangeDetectionStrategy#OnPush) this is a performance enhancement and we always just use push and the system will mark the forms dirty as needed. This does mean that for nested components or stuff that come from outside of servoy that you have to use [ChangeDetectorRef](https://angular.dev/api/core/ChangeDetectorRef#detectChanges)

Components should always extend the [ServoyBaseComponent](/reference/extension-dev/component_services/directives_and_filters.md#servoybasecomponent) to get a basic integration into the Servoy system.

The model properties defined in the spec of a component are just the basic [@Input](https://angular.dev/api/core/Input?tab=usage-notes) properties of angular

```typescript
@Input() format: Format;
@Input() inputType: string;
@Input() autocomplete: string;
@Input() styleClassForEye: string;
```

Properties that can change and want to push the value back to the server should be using the angular [@Output](https://angular.dev/api/core/Output?tab=usage-notes) which is then an [EventEmitter](https://angular.dev/guide/components/outputs)

```typescript
@Output() inputTypeChange = new EventEmitter();

this.inputTypeChange.emit(this.inputType);
```

The api of a component (as defined in the spec) are just public functions on a Component

```typescript
requestFocus(mustExecuteOnFocusGainedMethod: boolean) {
    this.mustExecuteOnFocus = mustExecuteOnFocusGainedMethod;
    this.getFocusElement().focus();
}
```

Every component gets already its name thought the [ServoyBaseComponent](/reference/extension-dev/component_services/directives_and_filters.md#servoybasecomponent) but also the [ServoyApi](/reference/extension-dev/component_services/directives_and_filters.md#servoyapi) object which has a lot more information like formname but also its unique markupid.


---

# 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.servoy.com/reference/extension-dev/component_services/servoycomponent.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.