Angular 2 Entity - Tutorial

By kenneth, Fri, 06/24/2016 - 19:35

Authored on


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 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 ng2_entity

Let's see how it could looks like into our Drupal installation: ng2_entity--cloningAlso you could get this project by downloading from githubgithub


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), ng2_entity--module

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

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  component.ts

Inside "article_component" folder there are two files, 

  • component.ts


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'
  - 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';

    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 + ')'}">
          <div class="article-content" [innerHTML]="value">
export class ArticleComponent {
    // We would like to define default values.
    public heading: string = '';
    public value: string = '';
    public photo: string = '';

    constructor(private _ElementRef: ElementRef) {
        let properties = drupalSettings.pdb.ng2.components[].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,


Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.

Valorie (not verified)

26/02/2020 - 08:27:28

Hi! This is my first comment here so I just wanted to give a quick shout out and say I genuinely enjoy reading through
your articles. Can you recommend any other blogs/websites/forums that cover the same
topics? Thank you so much!

Isabelle (not verified)

26/02/2020 - 14:01:46

You actually make it seem so easy with your presentation but I find this topic to be actually something which
I think I would never understand. It seems too complicated and very broad for me.
I am looking forward for your next post, I'll try
to get the hang of it!

Maxine (not verified)

27/03/2020 - 02:01:06

hello there and thank you for your info – I've certainly picked up
something new from right here. I did however expertise a few technical points
using this site, as I experienced to reload the website many times previous to I could get it to load correctly.
I had been wondering if your hosting is OK? Not that I'm complaining, but sluggish loading
instances times will very frequently affect your placement in google and could damage your quality score if advertising and marketing with Adwords.
Anyway I am adding this RSS to my email and could look out for much more of
your respective interesting content. Ensure that you
update this again soon.