keboca's sandbox: Angular 2 Entity

This module provides the ability to expose Drupal entities as Angular 2 components through Entity Display Modes and Progressive Decouple Blocks (PDB) contributed module.

Since PDB allows to declare Angular 2 components by write it down info.yml files, this module take advances of that by new keys:

• entity_display
• attributes
• properties

entity_display

It should be defined as "entity_display: view_mode", then it makes Drupal awares about new Angular 2 component to use as Entity View Component.

attributes

In order to map entity field values with Angular 2 components, this modules can map Angular 2 tag attributes with field values by defining proper attribute name with field machine name. i.e. An Angular 2 tag named "ng-magic" can map entity title within tag attribute, then within info.yml type in:

attributes:
  - heading: title

Then it will create an output like this:
<ng-magic heading='{entity.title}' ...
Where {entity.title} will be replace by proper entity title value.

properties

As same way as attributes, it will provide a way to map Angular 2 component properties with correct field values, and they will be injected by "drupalSettings". i.e. An Angular 2 component with a property named "value" could be mapped with "body" field like this:

properties:
  - value: body

Then Angular 2 component can grab those values by mapping them into constructor, like this,

export class ArticleComponent {
    // We would like to define default values.
    public heading: string = '';

    constructor(private _ElementRef: ElementRef) {
        // elRef.nativeElement.id
        let properties = drupalSettings.pdb.ng2.components[_ElementRef.nativeElement.id].properties;
        for(var key in properties) {
            this[key] = properties[key];
        }
    }
}

Right now, this module provides an Article Component that could work as bridge between Article entity and Angular 2 component, also there are a lot of new features that could be incorporate with this project, but I need your help to achieve it.

Light feature integrations

There is light integration with Token module to make easy map field values to Angular 2 either attributes or properties, where it needs first field machine name, then append tokens by colon, like this:

attributes:
  - image: field_image:file:url

However it's possible to create custom callback to parse complex field values, like this:

attributes:
  - tagUrl: field_link:uri:fromUri

Where it will grab "uri" value from "field_link" and call "fromUri" callback function to get need it value, source coude will looks like,

  public function fromUri($uri) {
    return Url::fromUri($uri)->toString();
  }

Last but not least, a documentation for this project will be available at http://keboca.com/node/5

To anyone who wants to colaborate, please check
https://github.com/kenneth-bolivar-castro/ng2_entity