Modify AEM Component to render Angular2 component content

In the AEM component’s HTL file “contactdetails.html” replace the entire Form html portion with the following Angular2 component selector,

<contact-details message=’${contactForm.contactDetails.contactJson}’>Loading contact form……</contact-details>

this selector will be used to render the Angular2 component’s html on the page, and we will need to pass the AEM dialog authored values as an input to the Angular2 component.

Angular2 root components do not allow to pass inputs using @Input(), so we will pass the dialog values as an selector tag attribute value.

–  /apps/ng2-aem/components/content/contactdetails/contactdetails.html

modified-htl-file

To display the content of Angular2 component we must have a separate .html template file, so create a new file “contactdetails.component.html” in the AEM component and copy the Form html in it. The path of this file need to be assigned to the templateUrl metadata property of Angular2 component.

–  /apps/ng2-aem/components/content/contactdetails/contactdetails.component.html

ng-comp-htm-1

ng-comp-htm-2

ng-comp-htm-3

 

ng-htm-comp-pointing

Modify UI.apps Maven POM file

– /NG2-AEM.ui.apps/pom.xml

Add the following exec maven plugin to the POM file.

ng2-maven-plugin

Building

mvn clean install -PautoInstallPackage

The maven build will invoke the Exec maven plugin which will trigger “npm install” and “npm run build” tasks which then executes the gulp build task which does the whole build process for the Angular2 code.

npm run aemsync : to manually sync the generated js files to running AEM instance without maven build.

Final Project Structure

project-layout-ui.apps

ng2-folder-structure

Output

comp-page-authoring

When the user starts typing in the address field, suggestions will be shown below the field.

page-sugvalues-display1

when the user clicks on one of the address suggestions, the country, state and zip code fields are auto populated.

page-sugvalues-debug

page-values-results

Thank you!

Madhukar Reddy