Download presentation
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.