AEM with Angular2 – part2

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 us to pass inputs using @Input(), so we will pass the dialog values as a selector tag attribute value.

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

To display the content of the 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 needs to be assigned to the templateUrl metadata property of the Angular2 component.

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

Modify UI.apps Maven POM file
– /NG2-AEM.ui.apps/pom.xml

Add the following exec maven plugin to the POM file.

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

Output
Drag the component onto the page and author the field labels in the dialog.

When the user starts typing in the address field, suggestions will be shown below the field and when the user clicks on one of the address suggestions, the country, state, and zip code fields are auto-populated.