This is living document. Information will be added and updated frequenty.

Official cheatsheet

Official Style Guide

1. librabry - used to publish angular librabry.
2. application - diffrent application

[class.name-of-class-to-apply]="conditionToApplyClass" <input #nameControl="ngModel"> This "nameControl" template variable will give access to the "NgModel" instance for this from input.

1. BrowserAnimationsModule and HttpModule shound be import only once either in root module or core module
2. CommonModule should be imported instead of BrowserModule if both module is imported.

1. Modular
2. Atomic
3. Self-contained.

this.emitter.observers.length > 0 (here this.emmitter the @Outpu() of the component)

1. Component
2. Attribute Directive changes the apperance or behavior of a DOM element.
3. Structural Directive

1. ViewChild @ViewChild(selector) tmplB: TemplateRef<any>
2. ViewChildern @ViewChildern(selector) tmplLstA: QueryList<TemplateRef<any>>
3. ContentChild @ContentChild(selector) tmplA: TemplateRef<any>
4. ContentChildern @ContentChildren(selector) tmplLstB: QueryList<TemplateRef<any>>

::ng-deep.viewType {} can be used to break the shadow dom or view encapulation in angular. I will only effect the Child Components only.

try to use only pure pipe. Be careful when using async pipe in angular

1. use trackBy in ngFor for any list. *ngFor="let item of list; trackBy: trackByFunc" const trackByFunc = (idx: number, itm: any) => itm.id

1. Cache management
2. Security
3. Storage
4. Extrage Logic

1. Can be easily done by TypeScript decorators.
2. @Memomize(5) public callApi() {}

1. imports required components in routing module and set the static proporty in routing module
2. use routing module static property for importing and exproting the component.

1. Core should only be imported into the root/app module export function throwIfAlreadyLoaded(parentModule: any, moduleName: string) { if (parentModule) { throw new Error(${moduleName} has already been loaded. Import core modules in the AppModule only); } } export class CoreModule { constructor(@Optional() @SkipSelf() parentModule: CoreModue) { throwIfAlreadyLoaded(parentModule, 'CoreModule') } }
2. Alternative: Base class as a guard. export class EnsureModuleLoadedOnceGuard { constructor(targetModuel: any) { if(targetModule) { throw new Error(${targetModule.constructor.name} has already been loaded. Import core modules in the AppModule only`); } } }

export class CoreModule extends EnsureModuleLoadedOnceGuard { constructor(@Optional() @SkipSelf() parentModule: CoreModue) { super(parentModule) } } `

1. Interact with the store
2. Pass obserable streams via async pipe
3. Receive events from child presenter components
4. Decide what toe do with events/data

1. Receive plain data from parent
2. Display data/make it pretty
3. User/system events are raised to parent via emitters
   1. Decisions are deferred
   2. Component is resuable and flexible
4. No knowledge of store, services, selectors, actions etc.

1. In tsconfig.json paths: { '@core/*': ['app/modules/core/*'] }
2. Don't do <input [value]="'hello world'"/>

3. ngProjectAs

1. platformBrowserDynamic().bootstrapModule(AppModule).then(module => enableDebugTools(module.injector.get(ApplicationRef).components[]0));
2. ng.profiler.timeChangeDetection()