ANGULARJS 2 0 GETTING STARTED Dhananjay Kumar debugmode

ANGULARJS 2. 0 : GETTING STARTED Dhananjay Kumar @debug_mode

Important points • Tweet your experience about webinar using the hashtag #Infragistics or tag @infragistics to win cool goodies from us. • Recording of webinar will be available by Wednesday on Infragistics blog. • You will also get Email notification for uploaded recording • We welcome all of you to take advantage of a FREE 30 Day Trial by downloading the product at: http: //www. infragistics. com/products/ultimate/download • Please reach out to us at Sales-India@infragistics. com for any follow up questions you may have. We welcome the opportunity to assist you. • http: //www. infragistics. com/community/blogs/dhananjay_kumar/default. aspx

Agenda Understanding basic of Components Data Binding Nested Components

I am Dhananjay Kumar • • • Infragistics Developer Evangelist 7 times Microsoft MVP @debug_mode dkumar@infragistics. com http: //debugmode. net

Environment used • VS Code • Node. JS • Using starter project from https: //github. com/Deborah. K/Angular 2 Getting. Started/tree/master/APM%20 -%20 Start

Why Angular. JS 2 ? 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 https: //angular. io/features. html

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

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 Angular. JS 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 as, @angular/core, @angular/common, @angular/router etc.

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

Bootstrap main component app/main. ts Index. html

Components Data • A Component is a main building block of an Angular. JS 2 application • An application may have any number of Components Templat e Logic • 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

Components Controller Scopes Angular. JS 1 Directives $scope Angular. JS 2 Components

Components Class Template Metadata Component

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

Components Metadata • • Template. Url Directives Providers Style. Urls Pipes Selector etc.

Binding Interpolation Property binding Event binding Two way binding

Child Component @input @output Event. Emitter on. Changes • Pass data from container component to child component • Emit event and pass data to container component from child component • Emit custom event on child component • Implement on. Changes to track the changes of value

Ignite UI = j. Query library from IG http: //www. igniteui. com

What Infragistics can offer you? • We welcome all of you to take advantage of a FREE 30 Day Trial by downloading the product at: http: //www. infragistics. com/products/ultimate/download • Please reach out to us at Sales-India@infragistics. com for any follow up questions you may have. We welcome the opportunity to assist you. • For technical queries send me email at dkumar@infragistics. com