Angular 2 : CRUD Operations 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 Routing Component Services Form Form validation

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

Environment used VS Code TypeScript NodeJS and NPM Using starter project from https://github.com/DanWahlin/Angular2-JumpStart

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 https://angular.io/features.html

Building blocks of Angular 2 Modules Components Templates Metadata Data binding Directives 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 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 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 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

Components AngularJS 2 Components AngularJS 1 Controller $scope Directives Scopes AngularJS 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 TemplateUrl Directives Providers Styles StyleUrls Pipes Selector etc.

Binding Binding Interpolation Property binding Event binding Two way binding

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

Q& A ?

Ignite UI = jQuery 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