This is living document. Information will be added and updated frequenty.
- librabry - used to publish angular librabry.
- 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.
BrowserAnimationsModule
andHttpModule
shound be import only once either inroot
module orcore module
CommonModule
should be imported instead ofBrowserModule
if both module is imported.
- Modular
- Atomic
- Self-contained.
this.emitter.observers.length > 0
(here this.emmitter
the @Outpu()
of the component)
Component
Attribute Directive
changes the apperance or behavior of a DOM element.Structural Directive
- ViewChild
@ViewChild(selector) tmplB: TemplateRef<any>
- ViewChildern
@ViewChildern(selector) tmplLstA: QueryList<TemplateRef<any>>
- ContentChild
@ContentChild(selector) tmplA: TemplateRef<any>
- 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
- use
trackBy
inngFor
for any list.*ngFor="let item of list; trackBy: trackByFunc"
const trackByFunc = (idx: number, itm: any) => itm.id
Cache management
Security
Storage
Extrage Logic
- Can be easily done by TypeScript decorators.
@Memomize(5) public callApi() {}
- imports required components in routing module and set the static proporty in routing module
- use routing module static property for importing and exproting the component.
- 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') } }
- 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) } } `
- Interact with the store
- Pass obserable streams via async pipe
- Receive events from child presenter components
- Decide what toe do with events/data
- Receive plain data from parent
- Display data/make it pretty
- User/system events are raised to parent via emitters
- Decisions are deferred
- Component is resuable and flexible
- No knowledge of store, services, selectors, actions etc.
- In
tsconfig.json
paths: { '@core/*': ['app/modules/core/*'] }
- Don't do
<input [value]="'hello world'"/>
- ngProjectAs
- platformBrowserDynamic().bootstrapModule(AppModule).then(module => enableDebugTools(module.injector.get(ApplicationRef).components[]0));
- ng.profiler.timeChangeDetection()