# Names

## File structure conventions

Every component file name should be:

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

Every template file name should be:

> \[ *ControlName* ].**compoment**.**html**

Every style file name should be:

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

Every spec file name should be:

> \[ *ControlName* ].**compoment**.**spec**

Every service file name should be:

> \[ *ServiceName* ].**service**.**ts**

## Single responsibility

### Rule of One (Style 01-01)

* Define one thing ( service, component ), per file.
* Limit to 400 lines of code per file.

### Small functions (Style 01-02)

* Limit to 75 lines of code per function.

## Naming

### General Naming Guidelines (Style 02-01)

* see [File structure conventions](broken://pages/-MG9b8Tkh7X8XMErAXrd#file-structure-conventions)

### Separate file names with dots and dashes (Style 02-02)

* Use Dashes to separate words in the descriptive name.

### Symbols and file names (Style 02-03)

* Use upper camel case for class names.
* Match the name of the symbol with the name of the file.
* Append the symbol name with the conventional suffix(such as Component, Directive, Module, Pipe, Service).
* Give the filename the conventional suffix (such as .component.ts, .directive.ts, .module.ts, .pipe.ts, or .service.ts) for a file of that type.

Samples:

| Symbol Name                                   | File Name                      |
| --------------------------------------------- | ------------------------------ |
| export class **ListPrimengComponent** { }     | list-primeng.component.ts      |
| export class **ComboBoxPrimengComponent** { } | heroes-primeng.component.ts    |
| export class **HeroListComponent** { }        | hero-list-primeng.component.ts |
| export class **UserProfileService** { }       | user-profile.service.ts        |

### Service names (Style 02-04)

* Use suffix a service class name with **service**.
* You can use a service name without the suffix if the name ends with -er. For example, logger.

Samples:

| Symbol Name                          | File Name            |
| ------------------------------------ | -------------------- |
| export class **HeroDataService** { } | hero-data.service.ts |
| export class **CreditService** { }   | credit.service.ts    |
| export class **Logger** { }          | logger.service.ts    |

## Bootstrapping (Style 02-05)

* Put bootstrapping and platform logic for the app in a file named **main.ts**
* Include error handling in the bootstrapping logic.

### Directive Selectors (Style 02-06)

* Use lower camel case for naming the selectors of directives.

### Custom prefix for components (Style 02-07)

* Use a hyphenated, lowercase element selector value. ***'wm'*** means WebMap.

```typescript
@Directive({
    selector : '[wm-users]'
})

export class ValidateDirective { }
```

### Custom prefix for directives (Style 02-08)

* Use a custom prefix (wm) for the directive selector. ***'wm'*** means WebMap.
* spell non-element selectors in lower camel case unless the selector is meant to match a native HTML attribute.

For example:

```typescript
@Directive({
    selector : '[wmValidate]'
})

export class ValidateDirective { }
```

### Pipe names (Style 02-09)

* Use consistent names for all pipes, named after their feature.

| Symbol Name                                                    | File Name        |
| -------------------------------------------------------------- | ---------------- |
| export class **EllipsisPipe** implements **PipeTransform** { } | ellipsis.pipe.ts |

## Angular NGModule names (Style 02-12)

* Append the symbol name with the suffix Module.
* give the file name the .module.ts extension.


---

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