![Property Binding
✘ Bind directly to properties on DOM model
using []
✘ Very powerful and convenient](https://image.slidesharecdn.com/angular2-160626131952/85/Angular-2-An-Introduction-18-320.jpg)
![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.](https://image.slidesharecdn.com/angular2-160626131952/85/Angular-2-An-Introduction-25-320.jpg)
Angular 2 - An Introduction
- 1. Angular 2
- 2. HELLO! I am Hiten Pratap Singh You can find me at https://github.com/hitenpratap/ https://hprog99.wordpress.com/ [email protected]
- 3. Anguar 2 AngularJS2 It can be used with JS, TypeScript and DART etc
- 4. Angular 1 to Angular 2 What’s actually changed?
- 5. 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
- 6. What is Angular 2? Why it is so awesome.
- 7. Angular 2 Building Blocks
- 9. 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
- 10. 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.
- 12. 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
- 14. 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).
- 15. Bind Component To Template What are they?
- 16. Ways to bind component to template ✘ Interpolation Expressions ✘ Property Binding ✘ Event Binding ✘ ngModel
- 17. Interpolated Expressions ✘ Used {{}} to achieve said task ✘ Put expression inside the brackets
- 18. Property Binding ✘ Bind directly to properties on DOM model using [] ✘ Very powerful and convenient
- 19. Event Binding ✘ Bind directly to events on DOM model using () ✘ Again power just can’t be described in words
- 20. ngModel ✘ Allows two way data binding ✘ Follows uni-directional data flow concepts ✘ Demo to be followed
- 21. Child Components What are they and how to use them?
- 22. Child Components ✘ Exist within another Component called Parent Component ✘ To make a child component just make it and tell its parent about it. SIMPLE!!!
- 24. Parent To Child Communication What is this and how do they accomplish it?
- 25. 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.
- 27. Child To Parent Communication What is this and how do they accomplish it?
- 28. Event Emitting and @Output ✘ Child to parent communication is achieved by @Output and Event Emitting together.
- 30. Services In Angular 2 How to use them?
- 31. Services ✘ Services are best to perform CRUD opeartions ✘ Keep main processing part separate from Components.
- 33. THANKS! Any questions? You can find me at: https://github.com/hitenpratap/ https://hprog99.wordpress.com/ [email protected]