Angular 2 Entity is a module that provides the ability to expose Drupal entities as Angular 2 components through Entity Display Modes and Progressive Decouple Blocks (PDB) contributed module, cool, isn't it? But how could we see an implementation of that? In this case, we now go through an example by using this module and creating a view to expose all our articles as Angular 2 components. Let's get start it!

Install and configure Angular 2 Entity module

Since this module is still a sandbox project, we go to get this module by cloning this repository following instructions provides into Drupal.org official project page:

We could go to Angular 2 Entity project page and click to "Version control" tag, then following instructions to clone this repository, basically you need to type in:

git clone --branch 8.x-1.x https://git.drupal.org/sandbox/keboca/2755391.git ng2_entity

Let's see how it could looks like into our Drupal installation: Also you could get this project by downloading from github: 

 

After that, we need to install it as any other regular module into Drupal, then navigate to "Extends" admin page (/admin/modules) to enable it. In order to select which entity types should have new "Angular 2 component" view mode, you can go to this module admin page (/admin/config/ng2_entity/ng2entityviewdisplayconfig), 

By default this module enable "Content" type, but we could select any other we need, for now it is good enough,  

In this case, we need to configure "Manage Display" of "Article" content type (/admin/structure/types/manage/article/display),  once there, we should enable new "Angular 2 component" view mode into custom display settings,

 

Once you enabled this custom display mode, we go to this tab settings to select any available "Angular 2 component" into "Component settings" option, this module provides out-of-the-box an Angular 2 component named: "Article component", then it needs to be select and save it by click "Save" button,

 

Create view to expose all article as Angular 2 components

Drupal 8 has view in core, then we will create a regular view named "Article as NG2 Components" and defining "article" as content, also we should check create a page, it should looks like this,

 

Now we need to change view mode to "Angular 2 component" and save it,

 

Create dummy article content

We could create articles manually one by one or we can use "Drupal Console" to create our dummy content, then just type in "drupal create:nodes",

 

Ready to rock? Check it out!

We can define a custom path see our view, in this case default path is "/article-as-ng2-components", then if we browse there we can see our articles exposes as Angular 2 components,

If we open developer tools and inspect DOM elements, we can notice each view row contains one Angular 2 component, yay!

Which Angular 2 component is being rendered

This module provides an Angular 2 component named "Article component" by default, then let's take a look over Angular 2 component definition,

vagrant@d8:~/drupal/modules/contrib/ng2_entity/ng2_component/article_component$ ls
article_component.info.yml  component.ts

Inside "article_component" folder there are two files, 

• article_component.info.yml
• component.ts

File article_component.info.yml

Here is definition of our Angular 2 component and the way to tell Drupal about this new component to be enable as view component, as we see at Manage Display into Article content type,

name: Article Component
machine_name: article-component
type: pdb
entity_display: view_mode
description: 'NG2 Article Component'
package: NG2
module_status: active
presentation: ng2
core: '8.x'
properties:
  - heading: title
  - value: body
  - photo: field_image:file:url

We are defining this component as same way as PDB module, but what's new here, we need to define "entity_display" as "view_mode" in order to make it appears into "Component Settings" into "Manage Display" of "Article" content type (/admin/structure/types/manage/article/display).

Also we are defining "properties" to map Drupal field values into Angular 2 component, there is three attributes,

• heading: It is mapped with "title" field value.
• value: it is mapped with "body" field value. 
• photo: it is mapped with "field_image" field value, but if we noticed we add a colon ( ":") after machine name and a valid token "file:url" to retrieve proper value. 

File component.ts

Now we check how our Angular 2 component looks like and how we map values from Drupal to our Typescript class,

import { Component, ElementRef } from '@angular/core';

@Component({
    moduleId: __moduleName,
    selector: 'article-component',
    styles: [`
        .article-wrapper {
           border: 2px dashed silver;
           text-align: center;
        }
        .article-content {
            font-size: x-large;
        }
    `],
    template: `
        <div class='article-wrapper' [ngStyle]="{'background-image': 'url(' + photo + ')'}">
          <h1>{{heading}}</h1>
          <div class="article-content" [innerHTML]="value">
          </div>
        </div>
    `
})
export class ArticleComponent {
    // We would like to define default values.
    public heading: string = '';
    public value: string = '';
    public photo: 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];
        }
    }
}

In this case, a "ElementRef" instance is injected to "constructor", then we can grab the entity property values what we defined into our *.info.yml file, then we are mapping those values with our class properties by iterating them. Now take a look over: "template" definition into"@component()" decorator, that's the way it exposes those attribute once Angular 2 component is running.

 

What's next!?

There is a lot of new use cases we can implement with this module, if you noticed we are using Drupal view to expose our content and Angular 2 Entity to expose them as Angular 2 components, right now I am writing more documentation for this project, it means, I will write new a more interesting use cases and explain how it works behind the scene as well.

Also this module is in current development, I will add more new great features, but feel free to get in touch to contribute with any idea(s), coding, testing it or creating issues about bugs, so please visit github issue tracking page of this repository, because whatever help is welcome.

Have a ball, and enjoy exposing your Drupal entities as Angular 2 components,

See ya around,