Angular: How To (my good practice)

This is my place to keep up to date the good practice in my development process 🎉

1. Creating and initialising angular components

When creating a new component use the Angular built in command ng generate component our-test- component to avoid writing boiler-plate code and typos.

Steps:

• Move to the folder of the team that will have ownership of the component. Ex: X team will have its /app folder with their current angular components.

cd /X-portal/webapp/src/app

• Generate component inside the folder.

ng generate component our-test-component

NOTE: Try to avoid adding all the components in the general folder. If a component is a sub-component of one and used only there, then create it in the specific component.

• Check the component to be added in app.module.ts file.

NOTE: when adding/checking the imports have in mind the LENGTH of the import line. If the linter throws a warning about the max character number please split as in the example.

import {
  OurTestComponentComponent
} from './our-test-component/our-test-component.component';

• Rename the selector of the component from app-our-test-component to our-the-component.

Note: Make sure your Linting is set properly before you start any development. Files indentations set to tabs(4 spaces).

2. Variables and method declaration

2.1 Public vs private variables

• Public declaration

public pickupCompletedPageData: any; 
public pickupHour = '20:00';

• Private declaration

private _pickupCompletedPageData: any; 
private _pickupHour = '20:00';

NOTE: Variables that have a default value do not need to have a type set, typescript handles it.
NOTE 2: Avoid declaring variables in the middle of functions. Declare as many as possible at the top of the method.

2.2 String definitions and handling

In case of static strings please use ‘. Do not use ` or “. The linter should warn you about this.

public text = 'some text';

Composed strings with JS variables (Tilda ES6+):

public text = `Some text with ${concatenatedValue}`;

DO NOT USE STRING CONCATENATION

public pickupText = 'Some text with ' + concatenatedValue; // NOT A GOOD PRACTICE

2.3 Functions

We are setting also the methods as private/public. Private methods are set with _ at start.

/**
* Set locally an id
* @param randomID - what is this value
*/
private _storeSomeID(randomID: any) {
  this.randomID = randomID;
}

For a method have in mind:

• Provide a short description of the methods, its purpose.
• Provide a short description of the required parameters (specifying their type in the description in the comment is a bonus).
• Set the type of all parameters that are required.
• Provide any extra README / TODO / TOIMPROVE comments that would make the understanding of the method easier (ideal for anything that has a more complex logic).
• Optional: provide the type of return of the method.

2.4 HTML Tags

When writing an HTML tag please follow these rules:

• Have the HTML tag separate from the upper tag by one empty line (code visibility).
• All your properties on your HTML tag must be on separate lines (you can put on same line maximum of 2 props if they do no pass the max length linting rule).
• DO NOT USE STATIC VALUES INSIDE YOUR HTML ELEMENTS
• Please use as primary quote “ , use ‘ inside of “ only.
• Variable names must be separated by one space from their brackets.

{{ something.someValue }}

• All properties that are on a new line MUST be one tab indented inside.

Example of html tag:

<input id="some-id"
  class="some-class"
  (change)="method($event)"
  type="text"
  placeholder="{{ something.someValue }}"
  (click)="anotherMethod($event)"/>

2.5 CSS Variables

In the case of using colours, borders, font pixels and other values multiple times, it is a good practice to define variables.

Those can be defined in 2 ways:

• Define them into the root

In this case the variables can be used everywhere as long as the z-index of the element is not higher than the router-outlet.

:root {
  --primary: #4b0082;
}
element {
  background-color: var(--primary);
}

• Define them into a css file and import into the component

In this case the variables can be imported only when needed.

// variables.scss file
$primary: #4b0082;
// Component
@import "/variables";
.content {
  background: $primary;
}

2.6 Test component general naming rules

The wrapping describe should have as string something similar to:

describe('OurTestComponentComponent Test', () => {});

3. General good practices in component structure

3.1 Static string dictionaries

In case you want to add static string to your angular component that are no provided by an API call create a Dictionary that will contain all your static strings. This helps the content of the component to be maintained easier and be more DRY.

public dictionary: any = {
  actions: {
    title: 'Title',
    clear: 'Clear',
    done: 'DONE'
  }
}

3.2 Use ?. as value checking

?. checks if the value of the parent is undefined, in case if it undefined it will return undefined. This is a way of avoiding reference error that would break the JS on page.

object['value']?.value?.someValue;

Madalina-Eleonora Portfolio Website