# ng-compile-component

> > A simple AngularjS component for compiling components dynamically.

Latest version **3.0.3** (published 2017-11-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng-compile-component
pnpm add ng-compile-component
yarn add ng-compile-component
bun add ng-compile-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.3 |
| Published | 2017-11-26 |
| First published | 2017-01-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ricard Derheim |
| Maintainers | rckd |
| Keywords | AngularJS, Components, Compile |

## Links

- npm: https://www.npmjs.com/package/ng-compile-component
- Repository: https://github.com/rickhub/ng-compile-component
- Homepage: https://github.com/rickhub/ng-compile-component#readme
- Issues: https://github.com/rickhub/ng-compile-component/issues
- npm.io page: https://npm.io/package/ng-compile-component

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 3.0.3 (latest) — 2017-11-26
- 3.0.2 — 2017-11-26
- 3.0.1 — 2017-11-26
- 3.0.0 — 2017-11-26
- 2.1.0 — 2017-03-24
- 2.0.1 — 2017-01-04
- 2.0.0 — 2017-01-02
- 1.1.0 — 2017-01-02
- 1.0.4 — 2017-01-01
- 1.0.3 — 2017-01-01
- 1.0.2 — 2017-01-01

## README

# ng-compile-component
> A simple AngularjS component for compiling components dynamically.

This component allows you to render components dynamically into your views, based on their name. To pass attributes you simply define an object with the properties required by the target-component's bindings. Check out the example below for getting started.

---

### Install (npm)
```shell
npm i ng-compile-component
```

---

### Include js
```html
<script src='./node_modules/ng-compile-component/dist/ng-compile-component.min.js'></script>
```

### Add the dependency
```javascript
angular.module('app', ['rckd.utils']);
```
Now you are ready to rumble!

---
# Usage
`<ng-compile-component component='=' bindings='='>`

Attributes:

> `component`
> Contains the name of the target-component (i.e. "myFancyComponent" or "my-fancy-component")

> `bindings`
> An object which represents the bindings of the target-component.

> `config` (optional)
> Allows you to define or override the binding types for more control.

### Example

Inside of your component's controller:
```javascript
this.component = 'message-box';
this.bindings = {
    title: 'Hey',
    message: 'You wanna compile something?',
    buttons:{
        no: true
        yes: true
    },
    custom: 'text'
};

// this is optional
this.config = {
  title: '@',
  message: '=',
  custom: function(attr, value){
    // render attribute
    return attr + '=' + value;
  }
};
```

Inside of your html:
```html
<ng-compile-component
    component='$ctrl.component'
    bindings='$ctrl.bindings'
    config='$ctrl.config'
></ng-compile-component>
```

This results in:
```html
<message-box
  title='{{ $ctrl["title"] }}'
  message='$ctrl["message"]'
  buttons='$ctrl["buttons"]'
  custom=text
></message-box>
```
---

Define values inline:
```html
<ng-compile-component
    component='"message-box"'
    bindings="{
      title: 'Hey',
      message: 'You wanna compile something?',
      buttons:{
        yes: true,
        no: true
      }
    }"
    config="{
      title: '@',
      message: '='
    }"
></ng-compile-component>
```

---
_Source: https://npm.io/package/ng-compile-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._