Component structure

my.component.ts

This is an example on how the component.ts should be structured.
The order also has to be respected

@component{(
selector: 'my-component',
templateUrl: 'my-component.html',
styleUrls: ['my-component.scss'], // Only if scss contains code
)}
export class myComponent extends baseComponent implements ngOnInit {
myObservable$: Observable<any> // $ for observable
myPublicVar: any // single variable (object/number/string/boolean)
myBoolean = false // don't give a type if you directly assign a value
myBoolean: boolean = false // Bad
myObjects: User[] = [] // Good : because we don't know what kind of object we declare
myPublicVars: any[] // s -> arrays of something
private _myPublicVar: any // _ for private
protected _myProtectedVar: any // _ for protected
constructor(
public publicClass: PublicClass,
private readonly _privateClass: PrivateClass,
protected readonly _protectedClass: ProtectedClass
) {
super(_protectedClass)
this._privateClass.doSomething() // use "this" when calling a class / variable
}
// 1: angular lifecycle hooks -> https://angular.io/guide/lifecycle-hooks
ngOnInit() { // Angular methods Should be implemented at the class lvl
}
// 2: public methods
publicMethod() {
}
// 2.2 : If the method uses another one from the same class, it should be placed under this one
secondPublicMethod() {
/**
* do something
*/
this.publicMethod().doSomething()
}
// 3: private methods
private privateMethod() {
}
// 4: protected methods
protected protectedMethod() {
}
}

Methods

If, for example, a service only has one item (ex: user),

this variable is named item and items for an array of users.

In that case, methods should have a general name (getItem, setItem, ...),

so that every programmer can use the class without having to deal with the classes and copy previous methods that he needs to other services.

If a lot of methods are just copy pasted : the user should think of creating a baseService (same for baseComponent).

for further explanation.

item: user
items: user[]
getItem(): any {} // return a single object/variable
getItems(): any[] {} // s -> return an array of
// set a value
setItem(id: number): void {
this.myPublicVar = id
}
// populating an arrays
populateItem(objects: any[]): void {
this.myPublicVars = []
this.objects.foreach(object => {
this.myPublicVars.push(object)
})
}
toggleTheme() {
this.myBoolean = !this.myBoolean
}
deleteItem() {}
updateItem() {}

Bases

Services

If a lot of methods are just copy pasted, the user should think of creating a baseService (same for baseComponent)
A base class should be save under app/core/bases

base-page.service.ts

@Injectable()
export class BasePageService {
item: any
getItem() {}
updateItem() {}
deleteItem() {}
}

user.service.ts

@Injectable()
export class UserService extends BasePageService {
// <-- extends BasepageService
item: user
}

user.component.ts

If a user component has his own service, this one should be called itemService when declared.
This way it will help other developers to copy paste methods (also on the html side) without having to change the code

export class UserComponent {
constructor(public itemService: UserService) {
// <-- itemService
}
updateItem() {
this.itemService.updateItem()
}
}

group.service.ts

@Injectable()
export class UserService extends BasePageService {
item: group
updateItem() {
// <-- custom method
/**
* Group custom updateItem method
*/
}
}