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.


General Naming Guidelines (Style 02-01)

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


Symbol Name

File Name

export class ListPrimengComponent { }


export class ComboBoxPrimengComponent { }


export class HeroListComponent { }


export class UserProfileService { }


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.


Symbol Name

File Name

export class HeroDataService { }


export class CreditService { }


export class Logger { }


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.

    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:

    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 { }


Angular NGModule names (Style 02-12)

  • Append the symbol name with the suffix Module.

  • give the file name the .module.ts extension.