Download to read offline
![PRESENTATION
TITLE
Presenter Name
Small Subtitle
[DELETE THIS]: Presentation caption should be ALL CAPS, small subtitle should be All Capitalized
MobX
yes we can](https://image.slidesharecdn.com/ng2-mobxwide-161119102042/75/Angular-MobX-Happiness-13-2048.jpg)
![@Injectable()
class State {
filter = '';
items = [];
}
Observable](https://image.slidesharecdn.com/ng2-mobxwide-161119102042/75/Angular-MobX-Happiness-18-2048.jpg)
![@Injectable()
class State {
filter = '';
items = [];
}
Observable](https://image.slidesharecdn.com/ng2-mobxwide-161119102042/75/Angular-MobX-Happiness-19-2048.jpg)
![import { observable } from 'mobx';
@Injectable()
class State {
@observable filter = '';
@observable items = [];
}
Observable](https://image.slidesharecdn.com/ng2-mobxwide-161119102042/75/Angular-MobX-Happiness-20-2048.jpg)
Uploaded by500Tech
Angular. MobX. Happiness
The document discusses the integration of MobX with Angular for managing state in applications. It highlights key concepts like observables, computed values, and actions, alongside coding examples that show how to filter and manage items within a component. Additionally, it references relevant projects and resources related to MobX and Angular development.
![Crafting [Better] API Clients](https://cdn.slidesharecdn.com/ss_thumbnails/better-api-clientscopy-150208205301-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codedagentsdeck-251215155422-5497c599-thumbnail.jpg?width=640&height=640&fit=bounds)
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
Angular. MobX. Happiness
- 1. 1. Angular 2. MobX 3.Happiness Adam Klein
- 2. Adam Klein -Frontend developer& consultant -Open source (ng2-tree, ng2-mobx) -Co-organizer of AngularUP -Fun fact: I used to have a jewfro CTO @ 500Tech
- 4.
- 5. Regular checkbox Selected Items Master Checkbox Master Checkbox Filtered Items adda framework change filter Imperative
- 6.
- 7. getFilteredItems() { const regexp= new RegExp(this.filter, 'i'); return this.items .filter((item) => regexp.test(item.name)); } Declarative
- 8. Declarative <div *ngFor="let itemof getFilteredItems()"> {{ item.title }} </div>
- 9. Declarative <div *ngFor="let itemof getFilteredItems()"> {{ item.title }} </div>
- 12.
- 13. PRESENTATION TITLE Presenter Name Small Subtitle [DELETETHIS]: Presentation caption should be ALL CAPS, small subtitle should be All Capitalized MobX yes we can
- 14. Michel Weststrate fromMendix Was written for React Completely framework agnostic Automagically react to changes Works with plain objects MobX
- 15. Taking the stateout of components
- 16.
- 17.
- 18. @Injectable() class State { filter= ''; items = []; } Observable
- 19. @Injectable() class State { filter= ''; items = []; } Observable
- 20. import { observable} from 'mobx'; @Injectable() class State { @observable filter = ''; @observable items = []; } Observable
- 21. … getFilteredItems() { const regexp= new RegExp(this.filter, 'i'); return this.items .filter((item) => regexp.test(item.name)); } … Computed
- 22. … @computed get filteredItems(){ const regexp = new RegExp(this.filter, 'i'); return this.items .filter((item) => regexp.test(item.name)); } … Computed
- 23. … @computed get filteredItems(){ const regexp = new RegExp(this.filter, 'i'); return this.items .filter((item) => regexp.test(item.name)); } … Computed
- 24. … setFilter(value) { this.filter =value; } … Action
- 25. … setFilter(value) { this.filter =value; } … Action
- 26. … @action setFilter(value) { this.filter= value; } … Action
- 28. List of Frameworks Selected Items Filter Master Checkbox Filtered Items Selected Frameworks Component FrameworksFilter Component UI Components Obesrve? State
- 30. ng2-mobxgithub.com/500tech/ • 64 linesof code • Automatically observes state from the components • Deregisters observers onDestroy
- 31.
- 32.
- 33. export class SelectedItemsComponent{ constructor(private state:State) {} } <div> {{ state.filteredItems }} </div> ng2-mobx
- 34. export class SelectedItemsComponent{ constructor(private state:State) {} } <div> {{ state.filteredItems }} </div> ng2-mobx
- 35. export class SelectedItemsComponent{ constructor(private state:State) {} } <div> {{ state.filteredItems }} </div> ng2-mobx
- 36. export class SelectedItemsComponent{ constructor(private state:State) {} } <div *mobxAutorun> {{ state.filteredItems }} </div> ng2-mobx
- 37. @observable List of Frameworks Selected Items Filter Master Checkbox Filtered Items @computed Selected Frameworks Component FrameworksFilter Component UI Componentsng2-mobx
- 41.
- 47. MobX Redux Plain objects Immutabledata actions, middleware, dispatcher, reducers, selectors Automatic Explicit Computed values Use reselect
- 48. What’s next? ng-mobx forAngular1
- 49.
- 50.