Create AEM Component using Angular 2 JS

Create AEM component using Angular 2 js is one of the most awaited tutorial. This tutorials is in series with Integrate AEM with Angular 2 js, it is advised to go through it first before starting this tutorial.

In this tutorial i am going to cover how to create a component using angular2 js, also i have tried to add most of the commonly used components like text field, checkbox, combo box , text area etc.

Create rendering component using angular 2:-

Lets create a rendering component that content author will drag and drop from side kick to newly created page, Follow below steps to create a component in angular 2

  • Go to /apps/angular2-demo/components/content.
  • Right click and create a new component and enter below details.
    angular2 component aem
  • Click next and add Allowed Parent as */*parsys.
    add parsys angular2 component
  • Click next and Finish.
  • Open angular2-text-component.jsp and add below code.
<%--

Angular 2 Text Component .

this is demo component

--%><%
%><%@include file="/libs/foundation/global.jsp"%><%
%><%@page session="false" %><%
%><%
// TODO add you code here
%>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<cq:include path="par" resourceType="foundation/components/parsys"/>
<cq:includeClientLib categories="app.angular2-demo"/>
<head>
<title>Hello World</title>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}},
map: { 'app': '/apps/angular2-demo/components/content/angular2-text-component/ts' }
});
System.import('app/environment_main')
.then(null, console.error.bind(console));
</script>
</head>

<body>
<my-app>Loading...</my-app>
</body>

Create client lib folder for this component:-

  • Select /apps/angular2-demo/components/content/angular2-text-component and create a new node with name clientlibs and type cq:ClientLibraryFolder.
  • Select clientlibs folder and add categories property to it
    • Name:- categories
    • type:- String[]
    • value:- app.angular2-demo
  • Select clientlibs folder and create a new folder inside clientlibs with name angularNativeJs {you can use any name}.
  • Upload angular2.js that we have downloaded in above steps in js folder. For uploading either use webdav or vault. If you are not familiar with both just create a new file with name angular2.js under js folder and copy paste the code from downloaded angular2 js file to this file.
  • Repeat the above steps for es6-shim.min.js, system-polyfills.js, angular2-polyfills.js, system.js, typescript.js, Rx.js.
  • Create js.txt file parallel to js folder and add below line to it.
#base=js
es6-shim.min.js
system-polyfills.js
angular2-polyfills.js
system.js
typescript.js
Rx.js
angular2.js

Create TS folder to store TypeScript Files for this Component:-

  • Select /apps/angular2-demo/components/content/angular2-text-component and create a new folder by name ts.
  • Select ts folder and create a new file environment_app.component.ts and enter below code into it.
import {Component, View} from "angular2/core";

@Component({
selector: 'my-app',
})

@View({
template: '<h1>Welcome to Angular 2 Demo</h1>'+
'<h1>Text ({{textValue}})</h1>'+
'<h3> Description ({{textDesc}})</h3>'+
'Name: <input #textbox type="text" [(ngModel)]="textValue" required><br><br>'+
'Element Type: "{{textbox.type}}"<br><br>'+
'Address : <textarea #textarea [(ngModel)]="textDesc" rows="4"></textarea><br><br>'+
'Element Type: "{{textarea.type}}"<br><br>'+
'Option : <input #cb1 type="checkbox" value="one"> One <input #cb2 type="checkbox" value="two"> Two<br><br>'+
'Element Type: "{{cb1.type}}"<br><br>'+
'Gender : <input #rb1 name="sex" type="radio" value="M"> Male <input #rb2 name="sex" type="radio" value="F"> Female<br><br>'+
'Element Type: "{{rb1.type}}"<br><br>'

})
export class AppComponent {
public textValue = "Default value";
public textDesc = "Default Description"
}
  • The first line will import the Component and View package from angular2/core.
  • The @Component is an Angular 2 decorator that allows you to associate metadata with the component class.
  • The my-app can be used as HTML tag to injecting and can be used as a component, Means my view will render the component inside<my-app> tag in my jsp or html file..
  • The @view contains a template that tells Angular how to render a view.
  • The export specifies that, this component will be available outside the file. We can also initialize variables default values or can modify the values by calling a method from view and returning user values from method inside export class.

Select ts folder and create a new file environment_main.ts and enter below code into it.

import {Component} from 'angular2/core';
import {bootstrap} from "angular2/platform/browser"
import {AppComponent} from "./environment_app.component"

bootstrap(AppComponent);
  • The environment_main.ts file tells Angular how to load the component. To launch the application, we need to import both Angular’s browser bootstrap function and root component of the application.
  • After importing, the bootstrap is called by passing the root component type i.e. AppComponent.

Create Template for rendering our component:-

Lets create a template which we are going to use to render our angular 2 component. Follow below steps to create Template in aem:-

  • Go to /apps/angular2-demo/templates.
  • Right click and create new template and enter below details.
  • Enter AllowedPath as  /content(/.*)?
  • Click next and Finish.
  • Click Save All.
    create page rendering template

Test Angular 2 AEM Component:-

  • Go to Site Admin.
  • Create new Page and select Home page Template.
    create page angular2 aem component
  • Double click on Angular2Demo Page.
    angular2 aem component page rendering-min

Congratulations You have successfully create Angular 2 component in AEM. Click here to download code package.

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  

Leave a Reply

Your email address will not be published. Required fields are marked *