FITC produces events for digital creators in Toronto, Amsterdam, NYC and beyond
Save 10% off any of our events with discount code 'slideshare'
Check out our events at http://fitc.ca
or follow us at https://twitter.com/fitc
Overview
Learning a new framework is hard and it is often tempting to try to reuse the best practices you have learned from another framework. However every framework has it’s own unique way of solving problems and Angular 2 is no exception. So forget everything you know (about JQuery) and start learning Angular 2 the right way.
In this session Rob will add a few challenging features to an Angular 2 app and compare various was of implementing them. You’ll learn how to avoid common pitfalls of the framework and see some novel techniques for solving problems. By the end of the session you will be one step closer to mastering Angular.
Objective
To demonstrate how to approach problem solving the Angular 2 way
Target Audience
Anyone who wants to learn Angular 2 or get better at it
Assumed Audience Knowledge
Some experience building web apps with JavaScript will help but no experience with Angular 2 is required
Five Things Audience Members Will Learn
Common mistakes in Angular 2
Angular 2 best practices
The basics of RxJS
How to solve difficult problems with Angular 2
How best to utilize a component based framework
25. Takeaways - Parent → Child
- Use an @Input() binding on child
component
- Use es6 setters or ngOnChanges() to
handle changes
- When @Input() doesn’t work, inject
a @ViewChild()
26. Takeaways - Child → Parent
- Use an @Output() binding on child
component
- Pass events to parent through an
EventEmitter()
@Output() doThing = new EventEmitter();
doThing.emit('some event');
- In the parent, get the payload of
the event with $event
<child (doThing)="handelThing($event)"></child>
- If you can’t use an @Output()
binding you can inject the parent
component directly into the child
27. Takeaways - Sibling → Sibling
- Use a service to communicate between
siblings
- Try to avoid sharing mutable state
- Use observables to push events out
from a service to components
private state$ = new BehaviorSubject<>({});
doSomething(thing) {
this.state$.next(thing);
}
28. Takeaways - ngrx/store (Redux)
- ngrx/store library brings redux like
approach to Angular 2
- Centralized state
- One way data flow
29. Further Reading
Angular Cookbook
Component Interaction
rxjs/store
github.com/ngrx/store
egghead.io
Building Angular 2
Components
egghead.io
Step-by-Step Async
JavaScript with RxJS