@ngneat/overview - npm Package Compare versions

Comparing version 3.0.4 to 4.0.0

lib/dynamic-view/dynamic-view.component.d.ts

@@ -5,3 +5,3 @@ import * as i0 from "@angular/core";
     static ɵfac: i0.ɵɵFactoryDeclaration<DynamicViewComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicViewComponent, "dynamic-view", never, { "content": "content"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicViewComponent, "dynamic-view", never, { "content": "content"; }, {}, never, never, false, never>;
 }

lib/dynamic-view/dynamic-view.directive.d.ts

@@ -20,3 +20,3 @@ import { Injector, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
     static ɵfac: i0.ɵɵFactoryDeclaration<DynamicViewDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DynamicViewDirective, "[dynamicView]", never, { "view": "dynamicView"; "injector": "dynamicViewInjector"; "context": "dynamicViewContext"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DynamicViewDirective, "[dynamicView]", never, { "view": "dynamicView"; "injector": "dynamicViewInjector"; "context": "dynamicViewContext"; }, {}, never, never, false, never>;
 }
@@ -23,0 +23,0 @@ export declare class DynamicViewModule {

lib/teleport/teleport-outlet.directive.d.ts

@@ -12,3 +12,3 @@ import { OnChanges, OnDestroy, SimpleChanges, ViewContainerRef } from '@angular/core';
     static ɵfac: i0.ɵɵFactoryDeclaration<TeleportOutletDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TeleportOutletDirective, "[teleportOutlet]", never, { "teleportOutlet": "teleportOutlet"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TeleportOutletDirective, "[teleportOutlet]", never, { "teleportOutlet": "teleportOutlet"; }, {}, never, never, false, never>;
 }

lib/teleport/teleport.module.d.ts

@@ -16,3 +16,3 @@ import { OnChanges, OnDestroy, SimpleChanges, TemplateRef } from '@angular/core';
     static ɵfac: i0.ɵɵFactoryDeclaration<TeleportDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TeleportDirective, "[teleportTo]", never, { "teleportTo": "teleportTo"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TeleportDirective, "[teleportTo]", never, { "teleportTo": "teleportTo"; }, {}, never, never, false, never>;
 }
@@ -19,0 +19,0 @@ export declare class TeleportModule {

lib/views/comp-ref.d.ts

@@ -1,2 +0,2 @@
-import { ApplicationRef, ComponentFactoryResolver, ComponentRef, Injector, Type, ViewContainerRef } from '@angular/core';
+import { ApplicationRef, ComponentRef, EnvironmentInjector, Injector, Type, ViewContainerRef } from '@angular/core';
 import { ExcludeFunctions, ViewRef } from './types';
@@ -6,3 +6,3 @@ interface Options<C> {
     injector: Injector;
-    resolver: ComponentFactoryResolver;
+    environmentInjector: EnvironmentInjector;
     vcr: ViewContainerRef | undefined;
@@ -9,0 +9,0 @@ appRef: ApplicationRef | undefined;

lib/views/template-ref.d.ts

@@ -13,3 +13,2 @@ import { ApplicationRef, TemplateRef, ViewContainerRef } from '@angular/core';
     private element;
-    private wrapper;
     constructor(args: Args<C>);
@@ -16,0 +15,0 @@ detectChanges(): void;

lib/views/view.d.ts

@@ -1,2 +0,2 @@
-import { ApplicationRef, ComponentFactoryResolver, Injector, TemplateRef, Type, ViewContainerRef } from '@angular/core';
+import { EnvironmentInjector, InjectionToken, Injector, TemplateRef, Type, ViewContainerRef } from '@angular/core';
 import { Content, ViewRef } from './types';
@@ -10,16 +10,18 @@ import { TplRef } from './template-ref';
 }
-interface CompViewOptions extends _ViewOptions {
-    injector?: Injector | undefined;
-}
 interface TemplateViewOptions extends _ViewOptions {
     context?: Record<string, any> | undefined;
 }
+interface CompViewOptions<Context = any> extends _ViewOptions {
+    injector?: Injector | undefined;
+    environmentInjector?: EnvironmentInjector | undefined;
+    context?: Context | undefined;
+}
 export declare type ViewOptions = _ViewOptions & CompViewOptions & TemplateViewOptions;
+export declare const VIEW_CONTEXT: InjectionToken<Record<string, any>>;
 export declare class ViewService {
-    private resolver;
     private injector;
     private appRef;
-    constructor(resolver: ComponentFactoryResolver, injector: Injector, appRef: ApplicationRef);
-    createComponent<C>(component: Type<C>, options?: CompViewOptions): CompRef<C>;
-    createTemplate<C>(tpl: TemplateRef<C>, options?: TemplateViewOptions): TplRef<Record<string, any>>;
+    private environmentInjector;
+    createComponent<Comp, Context>(component: Type<Comp>, options?: CompViewOptions<Context>): CompRef<Comp>;
+    createTemplate<Context>(tpl: TemplateRef<Context>, options?: TemplateViewOptions): TplRef<Record<string, any>>;
     createView<T>(content: Type<T>, viewOptions: CompViewOptions): CompRef<T>;
@@ -32,2 +34,3 @@ createView<T>(content: TemplateRef<T>, viewOptions: TemplateViewOptions): TplRef<T>;
 }
+export declare function injectViewContext<T>(): T;
 export {};

package.json

 {
   "name": "@ngneat/overview",
-  "version": "3.0.4",
+  "version": "4.0.0",
   "description": "The Template for Success in Template Management",
   "peerDependencies": {
-    "@angular/core": ">=13"
+    "@angular/core": ">=14"
   },
@@ -34,3 +34,3 @@ "dependencies": {
   "fesm2015": "fesm2015/ngneat-overview.mjs",
-  "typings": "ngneat-overview.d.ts",
+  "typings": "index.d.ts",
   "exports": {
@@ -41,3 +41,3 @@ "./package.json": {
     ".": {
-      "types": "./ngneat-overview.d.ts",
+      "types": "./index.d.ts",
       "esm2020": "./esm2020/ngneat-overview.mjs",
@@ -44,0 +44,0 @@ "es2020": "./fesm2020/ngneat-overview.mjs",

public-api.d.ts

@@ -7,3 +7,3 @@ export { TeleportModule, TeleportDirective } from './lib/teleport/teleport.module';
 export { TplRef } from './lib/views/template-ref';
-export { ViewService, ViewOptions } from './lib/views/view';
+export { injectViewContext, ViewService, ViewOptions } from './lib/views/view';
 export { isComponent, isTemplateRef, Content, isString, ViewRef, ResolveViewRef } from './lib/views/types';

README.md

@@ -1,24 +0,286 @@
-# Overview
+<p align="center">
+ <img width="20%" height="20%" src="./logo.svg">
+</p>
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.0.4.
+<br />
 
-## Code scaffolding
+[![npm](https://img.shields.io/npm/v/@ngneat/overview?style=flat-square)](https://www.npmjs.com/package/@ngneat/overview)
+[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/overview/blob/main/LICENSE)
+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
+[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/overview/pulls)
+[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
+[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)
+[![spectator](https://img.shields.io/badge/tested%20with-spectator-2196F3.svg?style=flat-square)](https://github.com/ngneat/spectator)
 
-Run `ng generate component component-name --project overview` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project overview`.
-> Note: Don't forget to add `--project overview` or else it will be added to the default project in your `angular.json` file. 
+> Overview - The Template for Success in Template Management
 
-## Build
+## Compatibility with Angular Versions
 
-Run `ng build overview` to build the project. The build artifacts will be stored in the `dist/` directory.
+<table>
+  <thead>
+    <tr>
+      <th>@ngneat/overview</th>
+      <th>Angular</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        2.x
+      </td>
+      <td>
+        >= 11 < 13
+      </td>
+    </tr>
+    <tr>
+      <td>
+        3.x
+      </td>
+      <td>
+        >= 13
+      </td>
+    </tr>
+  </tbody>
+</table>
 
-## Publishing
+## Installation
 
-After building your library with `ng build overview`, go to the dist folder `cd dist/overview` and run `npm publish`.
+```bash
+npm i @ngneat/overview
+yarn add @ngneat/overview
+```
 
-## Running unit tests
+## Table of Contents
 
-Run `ng test overview` to execute the unit tests via [Karma](https://karma-runner.github.io).
+- [DynamicView](#DynamicContent)
+- [Teleporting](#Teleporting)
+- [ViewService](#ViewService)
+    - [createView](#createView)
+    - [createComponent](#createComponent)
+    - [createTemplate](#createTemplate)
 
-## Further help
+## `DynamicView`
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+Use the `dynamicView` structural directive to render a component, a template, HTML, or default template dynamically.
+
+Let’s say we build a generic error component. What we want is to give our consumers the flexibly to create it by using one of three options:
+
+- They can choose to use the default template
+- They can choose to use their own text which can be static or dynamic
+- They can choose to pass their own template or component
+
+```ts
+import { DynamicViewModule, Content } from '@ngneat/overview';
+
+@Component({
+  template: `
+    <div *dynamicView="view">
+      Default view
+    </div>
+  `,
+})
+export class ErrorComponent {
+  @Input() view: Content | undefined;
+}
+
+
+@NgModule({
+  imports: [DynamicViewModule]
+})
+class ErrorModule {}
+```
+You can also pass a `context` or an [`injector`](https://angular.io/api/core/Injector) as `inputs` to the directive:
+
+```html
+<h5>Component</h5>
+<ng-container *dynamicView="component; injector: injector"></ng-container>
+
+<h5>Template</h5>
+<ng-template #tpl let-title><b>{{ title }}</b></ng-template>
+
+<ng-container 
+     *dynamicView="tpl || component; 
+     context: { $implicit: 'my title' }">
+</ng-container>
+```
+
+If you pass `context` to a component and the value can be accessed via the `injectViewContext` function.
+
+## `Teleporting`
+
+Teleporting means rendering a view at a different location from its declaration. There are two cases it might be helpful: 
+
+- Avoid prop drilling to a nested component.
+- Rendering a view at another place in the DOM while keeping its context where it’s defined.
+
+You can read more about this approach in this [article](https://netbasal.com/beam-me-up-scotty-on-teleporting-templates-in-angular-a924f1a7798).
+
+
+Use the `teleportOutlet` directive to define a new `outlet`. An `outlet` is an anchor where the view will be projected as a sibling.
+
+```typescript
+import { TeleportModule } from '@ngneat/overview';
+
+@Component({ 
+  template: `
+    <div class="flex">
+      <ng-container teleportOutlet="someId"></ng-container>
+    </div>
+  `
+})
+export class FooComponent {
+}
+
+@NgModule({
+  imports: [TeleportModule]
+})
+export class FooModule {}
+```
+
+Use the `teleportTo` directive to `teleport` the view to a specific `outlet`:
+
+```typescript
+import { TeleportModule } from '@ngneat/overview';
+
+@Component({ 
+  template: `
+    <section *teleportTo="someId">
+      {{ value }}
+    </section>
+  `
+})
+export class BarComponent {
+  value = '...'
+}
+
+@NgModule({
+  imports: [TeleportModule]
+})
+export class BarModule {}
+```
+
+## ViewService
+The `ViewService` provides `facade` methods to create modular views in Angular. It's been used in various projects like [hot-toast](https://github.com/ngneat/hot-toast), and [helipopper](https://github.com/ngneat/helipopper). 
+
+### `createComponent`
+The `createComponent` method takes a `Component`, and returns an instance of `CompRef`:
+
+```ts
+import { ViewService, CompRef } from '@ngneat/overview';
+
+@Injectable()
+class ToastService {
+  componentRef: CompRef;
+
+  constructor(private viewService: ViewService) {}
+
+  init() {
+   this.componentRef = this.viewService
+      .createComponent(HotToastContainerComponent)
+      .setInput('defaultConfig', defaultConfig)
+      .appendTo(document.body);
+  }
+}
+```
+
+There are cases where we want to use an Angular [component](https://netbasal.com/using-angular-components-with-third-party-libraries-522a1f33003) template in a third-party library that takes a native DOM element or a string. In this case, we can use the `getRawContent` or the `getElement` method, respectively.
+
+```ts
+import { ViewService } from '@ngneat/overview';
+
+@Directive()
+class ChartDirective{
+
+  constructor(private viewService: ViewService) {}
+
+  createChart(color: string) {
+   const ref = this.viewService
+      .createComponent(FooTooltip)
+      .setInput('color', color)
+      .detectChanges(document.body);
+
+     const content = ref.getRawContent();
+
+     ref.destroy();
+
+     Highcharts.chart('container', {
+      tooltip: {
+        formatter: function() {
+          return content;
+       },
+       useHTML: true
+     },
+   });
+  }
+}
+```
+
+
+#### `createComponent` Options
+
+```ts
+createComponent({
+  component: Type<C>;
+  injector: Injector;
+  environmentInjector: EnvironmentInjector;
+  context: Record<string, any>;
+  vcr: ViewContainerRef | undefined;
+  appRef: ApplicationRef | undefined;
+})
+```
+
+If you pass `context` to a component and the value can be accessed via the `injectViewContext` function.
+
+### `createTemplate`
+The `createTemplate` method takes a `TemplateRef`, and returns an instance of `ViewRef`.
+
+```ts
+createTemplate({
+  tpl: TemplateRef<C>;
+  context: C;
+  vcr: ViewContainerRef | undefined;
+  appRef: ApplicationRef | undefined;
+})
+```
+
+### `createView`
+The `createView` method takes a `Component`, a `TemplateRef` or a `string`, and creates a `View`:
+
+```ts
+import { ViewService, Content } from '@ngneat/overview';
+
+@Injectable()
+class ToastService {
+  constructor(private viewService: ViewService) {}
+
+  createToast(content: Content) {
+    const ref = this.viewService.createView(content);
+    document.body.appendChild(ref.getElement());
+  }
+}
+```
+
+
+## Contributors ✨
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://www.netbasal.com/"><img src="https://avatars.githubusercontent.com/u/6745730?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Netanel Basal</b></sub></a><br /><a href="https://github.com/@ngneat/overview/commits?author=NetanelBasal" title="Code">💻</a> <a href="#ideas-NetanelBasal" title="Ideas, Planning, & Feedback">🤔</a></td>
+    <td align="center"><a href="https://github.com/shhdharmen"><img src="https://avatars.githubusercontent.com/u/6831283?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dharmen Shah</b></sub></a><br /><a href="#content-shhdharmen" title="Content">🖋</a> <a href="https://github.com/@ngneat/overview/commits?author=shhdharmen" title="Documentation">📖</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+
+<div>Icons made by <a href="http://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>

No alert changes

Improved metrics

Total package byte prevSize

153003

increased by14.82%

Lines of code

1289

increased by3.62%

Number of lines in readme file

287

increased by1048%

No dependency changes