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)

npm i ng-compile-component

Include module.js

<script src='./node_modules/ng-compile-component/module.js'></script>

Include ng-compile-component.js

<script src='./node_modules/ng-compile-component/ng-compile-component.js'></script>

Add the dependency

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:

this.component = 'message-box';
this.bindings = {
    title: 'Hey',
    message: 'You wanna compile something?',
    buttons:{
        no: true
        yes: true
    }
};

Inside of your html:

<ng-compile-component
    component='$ctrl.component'
    bindings='$ctrl.bindings'
></ng-compile-component>

This results in:

<message-box
  title='{{ $ctrl["title"] }}'
  message='{{ $ctrl["message"] }}'
  buttons='$ctrl["buttons"]'
></message-box>

Define values inline:

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