Angular 2

HELLO!I am Hiten Pratap Singh You can find me at https://github.com/hitenpratap/https://hprog99.wordpress.com/hiten@nexthoughts.com

Anguar 2 AngularJS2It can be used with JS, TypeScript and DART

etc

Angular 1 to Angular 2What’s actually changed?

Angular 1 to 2 - What’s changed?

✘ Controllers to Components✘ Unidirectional data flow✘ Simplified service model✘ Easier to understand. Easy learning curve✘ Template syntax is kinda same✘ Angular Module✘ $scope✘ jqLite/jQuery

What is Angular 2?Why it is so awesome.

Angular 2 Building Blocks

ComponentsWhat are they?

Angular 2 Components

✘ Components are directive with template✘ Angular 2 apps are usually built with

Component✘ No $scope and no more controller✘ Functions/Properties are bound directly from

component

How to create component?

✘ Create a class✘ Import the Component decorator✘ Add Meta-Data like selector, template,

directives etc✘ Export class to be used with other class.

TemplatesWhat are they?

Templates in your component

✘ Templates contains the HTML code which gets rendered on browser

✘ Can be placed inside @Component or referenced as a separate file

StylesWhat are they?

Styling your component

✘ Style declared in @Component will only be valid for that component only

✘ Can be added directly or referenced as separate file(s).

Bind Component To TemplateWhat are they?

Ways to bind component to template

✘ Interpolation Expressions✘ Property Binding✘ Event Binding✘ ngModel

Interpolated Expressions

✘ Used {{}} to achieve said task✘ Put expression inside the brackets

Property Binding

✘ Bind directly to properties on DOM model using []

✘ Very powerful and convenient

Event Binding

✘ Bind directly to events on DOM model using ()✘ Again power just can’t be described in words

ngModel

✘ Allows two way data binding✘ Follows uni-directional data flow concepts✘ Demo to be followed

Child ComponentsWhat are they and how to use them?

Child Components

✘ Exist within another Component called Parent Component

✘ To make a child component just make it and tell its parent about it. SIMPLE!!!

Parent To Child CommunicationWhat is this and how do they accomplish it?

Binding Parent TO Child via @Input

✘ Means binding data from parent to child✘ Usually involved two steps:

✗Add property to child and decoarte it with @Input decorator.✗Bind the parent property to child using [] syntax.

Child To Parent CommunicationWhat is this and how do they accomplish it?

Event Emitting and @Output

✘ Child to parent communication is achieved by @Output and Event Emitting together.

Services In Angular 2How to use them?

Services

✘ Services are best to perform CRUD opeartions✘ Keep main processing part separate from

Components.

THANKS!Any questions?You can find me at:https://github.com/hitenpratap/ https://hprog99.wordpress.com/ hiten@nexthoughts.com