# angular-compile-component

> > A simple AngularjS component for compiling components dynamically.

Latest version **1.0.0** (published 2017-01-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-compile-component
pnpm add angular-compile-component
yarn add angular-compile-component
bun add angular-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 | 1.0.0 |
| Published | 2017-01-01 |
| 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/angular-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/angular-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

- 1.0.0 (latest) — 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 `module.js`
```html
<script src='./node_modules/ng-compile-component/module.js'></script>
```

### Include `ng-compile-component.js`
```html
<script src='./node_modules/ng-compile-component/ng-compile-component.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.

### 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
    }
};
```

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

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

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

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