Angular Core Deep Dive Course Summary

notes.md

Angular directives in depth

• Angular directives decorator

• @Hostbinding with and without getters

• @Hostlistener: concept, $event, exportAs (why?)

• attribute directives

• structural directives

• replace *ngIf by more explicit syntax

• [FC] templateref: Represents an embedded template that can be used to instantiate embedded views. To instantiate embedded views based on a template, use the ViewContainerRef method createEmbeddedView(). Access a TemplateRef instance by placing a directive on an ng-template element (or directive prefixed with *). The TemplateRef for the embedded view is injected into the constructor of the directive, using the TemplateRef token. You can also use a Query to find a TemplateRef associated with a component or a directive.

• [FC] viewcontainerref: Represents a container where one or more views can be attached to a component. Can contain host views (created by instantiating a component with the createComponent() method), and embedded views (created by instantiating a TemplateRef with the createEmbeddedView() method).

View encapsulation in depth

• mechanism (ngContent-cX attribute)
• :host
• ::ng-deep
• :host-context()
• default vs shadow DOM
• encapsulation: none, emulated, ShadowDom

Internationalization

• description | meaning
• i18n
• unique identifier @@
• pluralization, alternative expressions
• message file
• translated file: src/locale/messages.fr.xlf
• angular.json -> configuration -> fr ->

Templates in depth

*ngTemplateOutlet with context

Dependency injection

• provider creates a factory function thats used once the DI system needs in instance of a service
• Create own provider function
• Inject dependencies to provider function
• Function needs to return new instance of Service
• Configure provider for component on component level (provider syntax):
  • provide: InjectionToken or name of service a)
  • useFactory: function from above
  • deps or b)
  • useClass or c) only use providers: [ServiceName]
• Configure with @Injectable on service level (treeshakable syntax)
• Create reference between provider function and injection in component with @inject()
• Hierarchical dependency injection
• Inject global application config

export const CONFIG_TOKEN = new InjectionToken<AppConfig>('CONFIG_TOKEN');

providers: [
	provide: CONFIG_TOKEN,
    useFactory: {() => APP_CONFIG}
]

constructor(@Inject(CONFIG_TOKEN) private config: AppConfig);

• Optional decorator
• Self decorator
• Skipself decorator
• @Host decorator for directives