General Naming and Coding Guidelines for Ignite UI for Angular

• Revision history
• Coding conventions
• General naming guidelines

Revision History

Version	User	Date	Notes
0.1	Zdravko Kolev	June 10, 2019	Initial version
0.2	Nadia Robakova	January 10, 2020	Move tests guidelines to new file
0.3	Konstantin Dinev	January 27, 2021	Updating guidelines

• Radoslav Karaivanov | Date:
• Konstantin Dinev | Date: 01/27/2021

Coding Conventions

1. Use upper camel case (PascalCase) when naming classes and interfaces (exceptionService to ExceptionService)
2. Use camelCase for methods, properties and local variables.
3. Use capitalized enums. Different in TypeScript guidelines.
4. Use underscore for private properties (private _size: string). Different in TypeScript guidelines.
5. Use underscore for private events (private _onOpening(event: OverlayCancelableEventArgs))
6. Use "I" as a prefix for Interface names. Different in TypeScript guidelines.
7. Explicitly set the type of a returned element. Example with HTMLElement below:

public get element(): HTMLElement {
    return this.elementRef.nativeElement;
}

8. Use @hidden tag to hide classes, methods, properties, and events from the API documentation:

/**
 * @hidden
 */
public toggleRowEditingOverlay(show) { .. }

9. Provide detailed descriptions to classes, properties, methods and events. This is mandatory for public and optional for private and protected members:

/**
 * An @Input property that autogenerates the `IgxGridComponent` columns.
 * The default value is false.
 * ```html
 * <igx-grid [data]="Data" [autoGenerate]="true"></igx-grid>
 * ```
 * @memberof IgxGridBaseDirective
 */
@Input()
public autoGenerate = false;

10. Using of Anonymous objects is not a good practice. Instead of having an anonymous object type define a specific Interface that can be referenced by our code.
11. Use whole words in names when possible.
12. Strive for Cyclomatic Complexity not higher than 7
13. Use PascalCase enum naming.
14. ViewChild, ViewChildren, ContentChild, ContentChildren should have private accessibility in components, unless the component can be inherited and you want to reuse it's view/content children, in which case the accessibility should be protected. If you want to access view/content childrent in tests, then cast the component to any type and access the private member this way.
15. When fixing a bug or making a change with a very specific reason you need to leave a comment above the code block change with the following format:

Leave a comment above your change in the format <initials> <date> <Issue Number|Issue Link> <Comment for the change>
e.g. K.D. June 28th, 2021 #1234 Adding this comment as an example
e.g. K.D. June 28th, 2021 https://github.com/IgniteUI/ignite-ui/issues/1234 Adding this comment as an example

General Naming Guidelines

1. Use upper camel case for class names export class IgxAvatar
2. Add 'Igx' prefix to class names export class IgxAvatar
3. Do use consistent names for all pipes, named after their feature
4. Don't name events with the prefix on. Angular guideline.
5. Use attribute directives when you have presentation logic without a template.
6. Use dashes to separate words in the descriptive name (Separate File Names with Dots and Dashes)
7. File names, do 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. Follow a pattern that describes the symbol's feature then its type. Example: The recommended pattern is feature.type.ts (badge.component.ts)
8. Do name test specification files the same as the component they test (with a suffix of .spec; Example: badge.component.spec.ts)
9. Extract templates and styles into a separate file, when more than 3 lines. Name the template file [component-name].component.html, where [component-name] is the component name the style file with [component-name].component.css.
10. Do define small functions and consider limiting to no more than 75 lines.
11. Component selectors - Use igx as a selector prefix and dashed-case or kebab-case for naming the element selectors of components.
12. Component styling follows the BEM methodology

@Component({
selector: 'igx-badge',
templateUrl: 'badge.component.html'
})
export class IgxBadgeComponent {}

13. Directive selector - Use igx as a selector prefix and lower camel case for naming the selectors of directives.

@Directive({
selector: '[igxAutocomplete]'
})
export class IgxAutocompleteDirective