How to integrate AEM with Angular 2 components

 

In this article, I will explain how to integrate AEM with Angular 2 by passing AEM component dialog values to Angular 2 component for this, I am going to create simple component that will read user entered value in the authoring dialog and display it on the angular template

If you are looking for AEM integration with angular 1+, then I would recommend you to read this article how to Integrate aem with angular 1

AEM with Angular 2 integration

First, I am going to load below dependencies in the head section of aem template, open the head.html file of your template and add below angular based dependencies

Now, add system.config in the same head section

I have written the code using typescript but the browser does not understand typescript so we need to compile it to the javascript after compiling typescript code using tsc command it generated below code

We need to import main function by using below code

 

Creating AEM component

Go to the “/apps/keysandstrokes/components/content” folder
Right click and create a new component by selecting create component option in the context menu bar and fill up the required fields

AEM Component

Don’t select anything in the next screens and finally click on “ok” button when it is enabled to create a component, once the component is created go to the dialog box and check textfield is created or not, we are going to read this textfield value and display it on the page

Open the helloworld.html sightly template of the component and add the below selectors, these selectors will render the angular 2 components html on the page, we are passing authored value as a input parameter to the angular 2 component, here we are passing it to the title-component by assigning it to the “ksTitle” property,

To display the content of Angular 2 component we must have a separate .html template file, for this I am going to create a new .html template in the AEM component it self and the path for this is “/apps/keysandstrokes/components/content/helloworld/helloworld-angular-template.html”, we need to assign this path to the templateUrl metadata property of Angular 2 component

Open the helloworld-angular-template.html file and add the below code

Finally the component structure will be something like below

AEM with Angular 2

 

Now, open the page in edit mode and author the text in the helloworld component, you must see something like below

Angular 2 with AEM Integration

Download Code

 

  • Debasis Mishra

    Hi Raj,
    Thanks for this article. Can you please share the code base to download. I am trying something similar like this “Passing dialog values to angular components” . Can you please share your typescript file.

    Thanks,
    Debasis

  • Neeraj Godiyal

    Thanks Raj for sharing the article. It really helps to begin with this.