# Components

## Component selector names(Style 05-02)

* Use *dashed-case* for naming the element selector of components.
* Use prefix ***wm*** in the selector name.

```typescript
@Component({
  selector: 'wm-hero-button',
  templateUrl: './hero-button.component.html'
})
export class HeroButtonComponent { }
```

## Components as elements (Style 05-03)

* Give components an element **selector**, as opposed to *attribute* or *class* *selector*. For example:

```markup
<!--ToHeroButton is not a component, it could be a directive!-->
<div toHeroButton />
```

## Extract templates and styles to their own files (Style 05-04)

* Extract templates and styles into a separate file, when more than 3 lines.
* Every component file name should be:

  > \[ *ControlName* ].**component**.**ts**
* Every template file name should be:

  > \[ *ControlName* ].**component**.**html**
* Every style file name should be:

  > \[ *ControlName* ].**component**.**css**

## Decorate input and output properties (Style 05-12)

* Use the ***@Input()*** and ***@Output*** class decorators instead of the ***inputs*** and ***outputs***

## Member sequence (Style 05-14)

* Place properties up top followed by methods.
* Place private members after public members, alphabetized.

## Delegate complex component logic to services (Style 05-15)

* Limit logic in a component to only that required for the view.
* Move reusable logic to services and keep components simple and focused on their intended purpose.

## Don't prefix output properties

* Name events without the prefix ***on***.
* name event handler methods with the prefix ***on*** followed by the event name.

```markup
<wb-label (saveTheDay)="onSavedTheDay($event)" />>
```

```typescript
export class HeroComponent {
  @Output() savedTheDay = new EventEmitter<boolean>();
}
```

## Put presentation log in the component class

Put presentation logic in the component class and not in the template.

## Components library folders

Each technology of components library has to be located in separate folders as **KendoUI** and **base-components**.

Each component must be contains three files:

* The html file that contains the template.
* The scss file that contains the component styles.
* The type script file that contains all component client logic.
* The test folder that contains: at least the spec file that contains all necessary tests for one component.
* The model with the properties to use.


---

# 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/documentation/winforms-angular-components/conventions/components.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.