![](\"https://adroitgroup.io/wp-content/uploads/2019/02/web_logo.png?sanitize=true\"){kind=logo}
\r \r \r
\r \r
\r \r
\r \r
\r \r
\r \r
\r \r
\r \r
\n \n
{{ userAndCartData.userData.name }}
\n{{ userAndCartData.cartPrice | currency }}
\n\n\n\n{{ userAndCartData[0].name }}
\n{{ userAndCartData[1] | currency }}
\n{{ userAndSubscriptionData.userData.name }}
\n{{ userAndSubscriptionData.paymentDueAt | date }}
\n\n\n\n{{ userAndSubscriptionData[0].name }}
\n{{ userAndSubscriptionData[1] | date }}
\n\n```\n\nThe directive utilizes the Angular language service's capabilities and gives you full type checking in it's template.\n\n[⬆ Back to top](#table-of-contents)\n\n### NgComponentOutlet Augmentation Directive\n\nAugments the {@link NgComponentOutlet} directive to allow for binding of inputs and outputs.\n\nIn your lazy loaded component define the input and outputs you wish to bind to.\n\n```ts\n@Component({\n selector: 'lazy-loaded-component',\n template: `...`,\n})\nexport class LazyLoadedComponent {\n @Input() public input1: string;\n\n @Output() public output1 = new EventEmitter{{item}}
\n```\n\ncredit: Alexander Inkin - https://medium.com/@waterplea\n\nMedium article: https://medium.com/angularwave/non-binary-ngif-cfdf7c474852\n\n[⬆ Back to top](#table-of-contents)\n\n### NgIf Augmentation Directive\n\nA utility directive that enhances Angular's `*ngIf` directive with extra functionality.\n\nThe directive is implicitly applied every time the original `*ngIf` is used and provides two additional template options for `*ngIf`.\n\nYou can supply both a loading and error template for `*ngIf`.\nThis can be particularly useful when you are working with async data\n\n```html\n\n {{value}}\n
\n```\n\ncredit: Alexander Inkin - https://medium.com/@waterplea\nMedium article: https://medium.com/angularwave/non-binary-ngif-cfdf7c474852\n\n[⬆ Back to top](#table-of-contents)\n\n### NgRenderIn Directive\n\nA structural directive that allows the rendering on templates based on the platform the application is running on.\n\nThe typical use case of the directive is to enable the usage of different templates for different rendering modes, eg.: usae a different view when the application is ran in SSR.\n\n```html\n{{ getRelativeDateTime | invoke: orderDate }}
\n```\n\nWith context\n\n```ts\n@component({\n ...\n providers: [\n {\n provide: METHOD_INVOKER_PIPE_HOST,\n useExisting: MyComponent\n }\n ]\n})\nexport class MyComponent {\n ...\n\n public title = 'My App';\n\n public componentMethodThatUsesThis(): string {\n return this.title;\n }\n}\n```\n\n```html\n{{ componentMethodThatUsesThis | invoke }}
\n```\n\n[⬆ Back to top](#table-of-contents)\n\n### Safe Pipe\n\nA pipe that bypasses Angular's built-in sanitization for the following security contexts:\n\n- HTML\n- Style\n- Script\n- URL\n- Resource URL\n\nThe pipe assumes HTML content to be sanitized by default.\n\nUsage:\n\n```html\n{{ value | safe }}\n```\n\n```html\n{{ value | safe:'html' }}\n```\n\n```html\n{{ value | safe:'style' }}\n```\n\n```html\n{{ value | safe:'script' }}\n```\n\n```html\n{{ value | safe:'url' }}\n```\n\n```html\n{{ value | safe:'resourceUrl' }}\n```\n\n[⬆ Back to top](#table-of-contents)\n\n## Mixins\n\nFactory functions that return class definitions that can be used to dynamically constructor arbitrary prototype chains allowing you to use multiple inheritance with ease.\n\n### Subscription Handler\n\nA Mixin function that provides functionality related to handling subscriptions.\nA class extending this mixin will have access to the `onDestroy` property that should be used in the various takeUntil operators throughout the streams defined by the concrete class.\nThe mixin's subscription handling logic depends on it's `ngOnDestroy` method being called by Angular. If you have to define `onDestroy$` lifecycle hook in your concrete class make sure to call `super.ngOnDestroy` as well or better yet use the [AuthHooks decorator](#autohooks) !\n\n```ts\nclass MyComp extends SubscriptionHandlerMixin() {\n constructor() {\n super();\n }\n}\n```\n\n[⬆ Back to top](#table-of-contents)\n\n### Media Observer\n\nA Mixin function that provides functionality related to observing the browser viewport's size.\nA class extending this mixin will have access to various observables named after the convention followed by numerous CSS frameworks: `xs$`, `sm$`, `md$`, `lg$`, `xl$`, etc...\nThese observable stream will always emit a boolean value indicating if the browser's viewport currently has a size fitting that breakpoint size criteria.\n\n```ts\nclass MyComp extends MediaObserver() {\n constructor() {\n super();\n }\n}\n```\n\n```html\n