Part 3 - AEM with Angular 2 – AEM Component development

In previous 2 parts we have seen challenges, project structure and build process for an AEM + Angular 2 project. In this post we’ll focus more on Angular 2 component development and will do a deep dive into sample component development so that we can understand various concepts involved in AEM + Angular 2 component development.

Let’s begin with defining some basic requirement for sample AEM + Angular 2 component that we’ll develop in this article.

Problem statement for our component

• Develop a simple AEM + Angular 2 component to find location details based on IP address
• Use Angular 2 Http service to get location detail (by calling remote REST web service) based on IP address provide via HTML form input
• Display data/response from REST web service using Angular 2 binding on UI
• Provide capability to authors so that they can change labels (e.g. label of “Search” button and label for “Location Detail” card/result) using component’s dialog

Image 1: “ip-location” AEM + Angular 2 in action on a AEM page

The idea behind developing this component is I want to cover AEM Authoring capabilities as well I want to show you how you can use Angular 2 features (like Http service, data binding etc.)

Before we proceed, I assume that you already know how to develop pure and simple AEM component and you also know about Angular 2 framework. Both of these skills are must to understand rest of this tutorial.

So, let’s get started!!!

We’ll be developing this component in 2 phases:

1. First we’ll develop Basic AEM component (no Angular 2 code involved here)
1. Create an AEM component in your application the way you have been creating AEM components (let’s say component name is ip-location). ip-location component will have a sightly template file called as “ip-location.html” and we are going to modify this file in next step.
2. Create a component dialog with 2 text fields “./goBtnLabel” and “./localtionLabel”, these are the fields that author will use to input text for “Search Location” button and “Location” label (as shown in above snapshot)

2. Modify basic AEM component and add Angular 2 code: In this step we’ll modify this component by adding an Angular 2 component TypeScript and template file. Here are the steps:
1. Create a file in component folder called “ip-location.component.ts”, this is the TypeScript file that will have Angular 2 component’s TypeScript code. Here is screenshot of code (I’ll share github URL towards end of this post):

Image 2: “location.html” Angular 2 template/view

2. At 10 we have added Angular 2 annotation/decorator for component and at line 12 we are loading a template/view for this component. NOTE the templateUrl path, we are not loading the “ip-location.html” file (which is actually component’s original sightly file), rather we are loading a different file called as “location.html”. This is because Angular 2 template will not render properly in EDIT mode and that’s why we’ll include this “location.html” explicitly from “ip-location.html” (as show below, line# 4). Have look at the test at line number 2 and 11.

Image 3: “ip-location.html” Sightly view that will load Angular view in PREVIEW mode

Image 4: “location.html” Angular 2 template referred and rendered by Angular 2 component

3. At line # 8 (Image 3), we have 2 HTML attributes “goBtnLabel” and “localtionLabel” populated using JCR property values (i.e. values entered by authors via component dialog). Since we don’t have a direct way to access JCR properties from Angular 2 component that’s why we are setting it as HTML attributes so that we can read it in our component’s TypeScript code

4. At line # 29 (Image 2), we have define a TypeScript function “getProperty()” that is responsible for reading  2 HTML attributes “goBtnLabel” and “localtionLabel” that we have defined at line # 8 (Image 3) and assigned it to Angular 2 component variables defined at line # 16 and 17 (Image 2) respectively. This is a hack to pass authored properties from JCR/properties to Angular 2 component but, so far it has worked perfectly fine for me

5. Once “goBtnLabel” and “localtionLabel” varibale in TypeScript code is populated/binded we can use these variables in Angular 2 templates as shown below line# 6 and 16 (Image 4)

6. In our Angular 2 component’s TypeScript code (line# 38, Image 2) we have defined a search() function that uses Angular 2’s “Http” service to call a REST API hosted by https://freegeoip.net. To call this REST API we read IP address entered by user in input field defined in location.html (line 4, Image 4). This input field is binded with an Angular 2 model variable defined in TypeScript file (line # 15, Image 2)

So in this post we have seen:

• How integrate Angular 2 code with AEM component
• How to load Sightly template (in EDIT mode) v/s render actual Angular 2 component (in PREVIEW mode)
• How to pass authored values from Sightly to Angular 2 template and bind it with Angular 2 model
• How to use Angular 2 services from AEM component

Just to summarize, in this 3 part series (Part 1, Part 2 and Part 3) we have discussed:

• Challenges to integrated Angular 2 with AEM (Part 1)
• Benefit of using Angular 2 with AEM (Part 1)
• Build process of an AEM application that users Angular 2 is different as compared to regular maven build (Part 2)
• Development of AEM component using Angular 2 (Part 3)

I hope this 3 part series will help you to understand, integrate and develop AEM + Angular 2 applications. If you have any questions or suggestion please feel free to post them.

Thanks for reading!!!

Part 1: http://suryakand-shinde.blogspot.com/2017/06/part-1-angular-2-with-aem-introduction.html

Part 2:

http://suryakand-shinde.blogspot.com/2017/06/part-2-aem-with-angular-2-building.html

Github Project/Source Code: https://github.com/suryakand/aem-angular2

In next part of this series we'll learn about how to write unit test for our components developed using Angular 2. 

Part 4: http://suryakand-shinde.blogspot.com/2018/01/part-4-aem-with-angular-2-unit-testing.html

Reference

This sample uses REST API provided by https://freegeoip.net