Todo List Tutorial
Primary version
Primary version
  • Welcome to the ngGirls tutorial!
  • Workshop: Todo List
    • 👀About
    • #0: 💃 Introduction
    • #1: ⌛ Installations
      • a. StackBlitz instructions
    • #2: 🅰 Angular kicks in
    • #3: 📐 Component
    • #4: ✏ A new component
      • a. StackBlitz instructions
    • #5: 💼 Class
    • #6: 📥 Property binding
    • #7: 📤Event binding
    • #8: 📎 Element ref - #
      • a. About
      • b. Explore
      • c. Resources
    • #9: 📋 The To Do list
    • #10: ➕ New component: todo-item
    • #11: ⛓ Interface
      • a. StackBlitz instructions
    • #12: 📌Add items
    • #13: 🚧 Refactor App Component
    • #14: 💅 Adding Style
    • #15: 🔋 Creating a Service
    • #16: 🎁 Add Items Using the Service
    • #17: 💾Local storage
    • #18: 🗑 Remove item
    • #19: 🔘 Adding a checkbox
    • #21: 💪 Enrich the todo-item component
    • Appendix 1: Git and GitHub
    • Appendix 2: 🛰 Deploying your app
      • Deploy to Azure Static Web Apps
      • Deploy to GitHub Pages
        • a. StackBlitz instructions
    • Appendix 3: Tutorial Extensions
    • Appendix 4: Generating a new project
    • Troubleshooting
      • Installation
  • More Workshops
    • Second workshops - CRUD and HTTP
      • #1 MongoDB
      • #2 Local server
      • #3 http in diagrams
      • #4 POST
      • #5 GET
      • #6 DELETE and PUT
    • Gallery with Rx.js
      • #0: Init photo gallery
      • #1: Observable
      • #2: More interaction! Upload photos
      • #3: Merging Observables
      • #4: Filtering by category
      • #5: Adding photos to category
    • Forms
      • #1: Template-driven forms
      • #2: Reactive forms
      • #3: Form builder
    • NgRx
      • #1: Actions and reducers
      • #2: Store Devtools
      • #3: Implementing actions in app
      • #4: Selectors
    • RxJS
      • Operators
      • Play time!
    • Blog Editor
      • #1 ⚙️Configuring firebase
      • #2 💅Add Angular Material
      • #3 💅Add Bootstrap
      • #4 🧭Add Navigation
      • #5 ✏️Add Editor
      • #6 ⚙️Connect Database
      • #6 💅Add Feed
      • #7 ✏️Edit Post
      • #9 🚀Deploy
      • #10 ✏ ️Next Steps
Powered by GitBook
On this page
  1. More Workshops
  2. RxJS

Play time!

PreviousOperatorsNextBlog Editor

Last updated 5 years ago

For playing a bit with RxJS we will use ready app (but you may develop this one by yourself if you wish - )

You may either clone the and find needed application state under /examples/3_05-add-photo-to-category or you may work on .

Find all the Operators used in the code. Check documentation of each one. Find them on . Discuss them with mentor and other attendees. Make notes, jot down questions you have.

Do you understand what they are doing? :thinking:

Now try to break something! :boom: Change operators, unsubscribe in some places, remove subscribe somewhere. Play with the app a little bit :stuck_out_tongue_winking_eye:

When you finish you may go back to the Todo list app you've created. Find all the places where you are using Observables and other RxJS related code. Try to understand each one - discuss it with mentor and other attendees if needed :speech_balloon:

I know this tutorial may seem boring a bit, but thinking and walking through ready code is also useful when learning something. :yellow_heart:

This time we have great oportunity to have Q&A session about RxJS with Jan-Niklas and about programming, Angular and all you may think of with all the mentors and other attendees. Whenever you feel ready for this Q&A session please let your mentor know :relaxed:

Instructions in here
repository
StackBlitz
RxMarbles