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. Workshop: Todo List

#21: πŸ’ͺ Enrich the todo-item component

So... We're still working on this one, but the purpose here is to be able to edit your todo item and use the input-button-unit component for this. You can either add an edit button or just let the user click or double click on the item's title. Then the simple item can be replaced (with *ngIf) with the reusable component. You should pass the title as an input and catch the submit event to update the title.

Previous#19: πŸ”˜ Adding a checkboxNextAppendix 1: Git and GitHub

Last updated 1 year ago