open-index/open-npm huggingface dataset:
npm package: @2ndaddress/sa-data-factories
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.0.
Latest version: 0.3.7

# SaDataFactories

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.0.

## Code scaffolding

Run `ng generate component component-name --project sa-data-factories` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project sa-data-factories`.
> Note: Don't forget to add `--project sa-data-factories` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build sa-data-factories` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build sa-data-factories`, go to the dist folder `cd dist/sa-data-factories` and run `npm publish`.

## Running unit tests

Run `ng test sa-data-factories` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @2ng/dynamic-component
Description: ```ts import { DynamicComponentModule } from '@2ng/dynamic-component'; ```
Latest version: 0.0.1

# @2ng/dynamic-component

## Usage

```ts
import { DynamicComponentModule } from '@2ng/dynamic-component';
```

```html
<ng-container
  [dynamicComponent]="component"
  [inputs]="inputs"
  [outputs]="outputs"
></ng-container>
```

## API

```ts
component: Type<C>
```

Компонент Angular

```ts
inputs: Partial<{ [input in keyof C]: C[input] }>;
```

Объект, ключи которого - это инпуты компонента, который будет отрисован динамически. Значение соответствует типу этого инпута.

Типизацией не смог получить только инпуты компонента, поэтому вывожу все свойства и методы класса в типах. Но внутри директивы присваиваю значение свойства только если задано значение свойству с именем инпута.

```ts
outputs: Partial<
  {
    [output in keyof C]: C[output] extends EventEmitter<infer K>
      ? (event: K) => void
      : never;
  }
>;;
```

Объект, ключи которого - это аутпуты компонента, который будет отрисован динамически. Значение - функция, которая будет передана в метод `subscribe`, при подписке на аутпут компонента.

Аналогично в типах вывожу все свойства и методы, но будет ошибка, если это свойство не экземпляр `EventEmitter`. Внутри директивы подписываюсь на аутпут только если свойству с именем аутпута присвоена функция .

---

## Example

### Component One

`one.component.ts`

```ts
import { Component, EventEmitter } from '@angular/core';

@Component({
  template: `
    <div>{{ name }}</div>
    <button (click)="showMore.emit()">Show more</div>
  `,
})
export class OneComponent {
  @Input() name: string;
  @Output() showMore = new EventEmitter<void>();
}
```

### Component Two

`two.component.html`

```html
<ng-container
  [dynamicComponent]="component"
  [inputs]="inputs"
  [outputs]="outputs"
></ng-container>
```

`two.component.ts`

```ts
import { Component } from '@angular/core';
import OneComponent from '/one.component';

@Component({...})
export class TwoComponent {
  component = OneComponent;
  inputs = {
    name: 'Andrey'
  }
  outputs = {
    showMore: () => this.onShowMore();
  }

  onShowMore() {
    console.log('show more');
  }
}
```