diff --git a/README.md b/README.md index 3d7b75bec..7c12a5479 100644 --- a/README.md +++ b/README.md @@ -30,53 +30,87 @@ $ npm install ng-dynamic-component --save ## Usage -### Root import +### DynamicComponent -Import `DynamicModule` **once** in your root module (usually `AppModule`): +Import `DynamicComponentModule` where you need to render dynamic components: ```ts -import { DynamicModule } from 'ng-dynamic-component'; +import { DynamicComponentModule } from 'ng-dynamic-component'; @NgModule({ - imports: [DynamicModule.forRoot()], + imports: [DynamicComponentModule], +}) +export class MyModule {} +``` + +Then in your component's template include `` where you want to render component +and bind from your component class type of component to render: + +```ts +@Component({ + selector: 'my-component', + template: ` + + `, }) -export class AppModule {} +class MyComponent { + component = Math.random() > 0.5 ? MyDynamicComponent1 : MyDynamicComponent2; +} ``` -### Usage import +### NgComponentOutlet + +You can also use [`NgComponentOutlet`](https://angular.io/api/common/NgComponentOutlet) +directive from `@angular/common` instead of ``. -And then you may import the module in any other of your modules where you need -to render dynamic components: +Import `DynamicIoModule` where you need to render dynamic components: ```ts -import { DynamicModule } from 'ng-dynamic-component'; +import { DynamicIoModule } from 'ng-dynamic-component'; @NgModule({ - imports: [DynamicModule], + imports: [DynamicIoModule], }) -export class OtherModule {} +export class MyModule {} ``` -### DynamicComponent +Now apply `ndcDynamicInputs` and `ndcDynamicOutputs` to `ngComponentOutlet`: -Then in your component's template include `` where you want to render component -and bind from your component class type of component to render: +```ts +@Component({ + selector: 'my-component', + template: `` +}) +class MyComponent { + component = MyDynamicComponent1; + inputs = {...}; + outputs = {...}; +} +``` + +Also you can use `ngComponentOutlet` with `*` syntax: ```ts @Component({ selector: 'my-component', - template: ` - - `, + template: `` }) class MyComponent { - component = Math.random() > 0.5 ? MyDynamicComponent1 : MyDynamicComponent2; + component = MyDynamicComponent1; + inputs = {...}; + outputs = {...}; } ``` ### Inputs and Outputs -You can also pass `inputs` and `outputs` to your dynamic components: +You can pass `inputs` and `outputs` to your dynamic components: ```ts @Component({ @@ -146,7 +180,7 @@ class MyComponent { Here you can specify at which argument event value should arrive via `'$event'` literal. _HINT:_ You can override event literal by providing -[`EventArgumentToken`](projects\ng-dynamic-component\src\lib\io\event-argument.ts) in DI. +[`EventArgumentToken`](projects/ng-dynamic-component/src/lib/io/event-argument.ts) in DI. ### Component Creation Events @@ -308,43 +342,6 @@ class MyComponent { } ``` -### NgComponentOutlet support - -You can also use [`NgComponentOutlet`](https://angular.io/docs/ts/latest/api/common/index/NgComponentOutlet-directive.html) -directive from `@angular/common` instead of `` and apply `inputs` and `outputs` to your dynamic components: - -```ts -@Component({ - selector: 'my-component', - template: `` -}) -class MyComponent { - component = MyDynamicComponent1; - inputs = {...}; - outputs = {...}; -} -``` - -Also you can use `ngComponentOutlet` with `*` syntax: - -```ts -@Component({ - selector: 'my-component', - template: `` -}) -class MyComponent { - component = MyDynamicComponent1; - inputs = {...}; - outputs = {...}; -} -``` - ### Extra You can have more advanced stuff over your dynamically rendered components like setting custom injector (`[ndcDynamicInjector]`) @@ -355,13 +352,19 @@ NOTE: In practice functionality of this library is split in two pieces: - one - component (`ndc-dynamic`) that is responsible for instantiating and rendering of dynamic components; - two - directive (`ndcDynamic` also bound to `ndc-dynamic`) that is responsible for carrying inputs/outputs - to/from dynamic component by the help of so called `ComponentInjector` (it is `ndc-dynamic` by default). + to/from dynamic component by the help of so called + [`DynamicComponentInjector`](projects/ng-dynamic-component/src/lib/component-injector/token.ts). Thanks to this separation you are able to connect inputs/outputs and life-cycle hooks to different mechanisms of injecting -dynamic components by implementing `ComponentInjector` and providing it via `DynamicModule.withComponents(null, [here])` in second argument. +dynamic components by implementing `DynamicComponentInjector` and providing it via +[`DynamicComponentInjectorToken`](projects/ng-dynamic-component/src/lib/component-injector/token.ts) in DI. It was done to be able to reuse [`NgComponentOutlet`](https://github.com/angular/angular/commit/8578682) added in Angular 4-beta.3. +To see example of how to implement custom component injector - see +[`ComponentOutletInjectorDirective`](projects/ng-dynamic-component/src/lib/component-injector/component-outlet-injector.directive.ts) +that is used to integrate `NgComponentOutlet` directive with inputs/outputs. + ## License MIT © [Alex Malkevich](malkevich.alex@gmail.com)