> For the complete documentation index, see [llms.txt](https://docs.gapvelocity.ai/webmap/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gapvelocity.ai/webmap/general/frontend/documentation/winforms-angular-components/conventions/components.md).

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