1. Angularjs 2.0 : Getting started
Dhananjay Kumar
@debug_mode

2. Important points
Tweet your experience about webinar using the hashtag #Infragistics or to win cool goodies from us.
Recording of webinar will be available by Wednesday on Infragistics blog.
You will also get notification for uploaded recording
We welcome all of you to take advantage of a FREE 30 Day Trial by downloading the product at:
Please reach out to us at for any follow up questions you may have. We welcome the opportunity to assist you.

3. Agenda Understanding basic of Components Data Binding
Nested Components

4. I am Dhananjay Kumar Infragistics Developer Evangelist
7 times Microsoft MVP
@debug_mode

5. Environment used VS Code NodeJS
Using starter project from

6. Why AngularJS 2 ? Build for progressive web, native mobile and desktop
Develop Across all platform.
Build for progressive web, native mobile and desktop
Speed and Performance using code generation, new Component router etc.
Support of template , CLI, and different IDE

7. Building blocks of Angular 2
Modules
Components
Templates
Metadata
Data binding
Directives
Services
Dependency injection

8. Modules Angular apps are composed of modules.
Modules export things — classes, function, values — that other modules import.
Usually Module has a single purpose and it export one thing such as Component class.
Applications are collection of modules with each module has a one specific task.
Although modules are highly recommended, it is optional to use in creating AngularJS 2 app
Module name is same as the file name without extension.
Usually Modules exports Component classes, Services, Pipes etc.
Angular provides various Modules Libraries such etc.

9. Modules Importing other Module’s Component
Angular libraries modules can be imported without a path prefix
To import user modules, path prefix is required
Exporting a Component from the Module
Module can export component class , value, function etc.
Module name is same as the file name without extension

10. Bootstrap main component
app/main.ts
Index.html

11. Components Logic Data Template
A Component is a main building block of an AngularJS 2 application
An application may have any number of Components
Data and logic can be created or brought on the page using Components
custom elements can be created or brought on the page using Components

12. Components AngularJS 2 Components AngularJS 1 Controller $scope
Directives
Scopes
AngularJS 2 Components

13. Components
Class
Template
Metadata
Component

14. Components
Step 1: Create a typescript class with properties and behavior
Step 2: Decorate class with Component metadata
Step 3:Import statement- importing required modules to create this component.
Step 4: To use, either bootstrap the component or use as directive in another components

15. Components Metadata Template TemplateUrl Directives Providers Styles
StyleUrls
Pipes
Selector etc.

16. Binding Binding Interpolation Property binding Event binding
Two way binding

17. Child Component @input @output EventEmitter onChanges
Pass data from container component to child component
@input
Emit event and pass data to container component from child component
@output
Emit custom event on child component
EventEmitter
Implement onChanges to track the changes of value
onChanges

18. Q& A ?

19. Ignite UI = jQuery library from IG

20. What Infragistics can offer you?
We welcome all of you to take advantage of a FREE 30 Day Trial by downloading the product at:
Please reach out to us at for any follow up questions you may have. We welcome the opportunity to assist you.
For technical queries send me at