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

Forms

Previous#5: Adding photos to categoryNext#1: Template-driven forms

Last updated 5 years ago

As you've probably noticed, there is always more than one way to implement a solution for a feature. This is what makes programming exciting and code open to collaboration and discussion.

Today you will learn another approach to handle data-entry tasks- forms.

Angular supports template-driven and reactive forms to help developers work with a form's input elements. Each form type has its advantages and disadvantages so it's good to understand the differences and why you use one type over another.

Please take a moment to read about Angular forms from .

If you are already familiar with template-driven and reactive forms in Angular, we recommend refreshing your memory so that we can all approach the next steps in the tutorial on the same footing.

Please feel free to take the time you need to familiarize yourself with Angular forms and make notes as necessary. Mentors are happy to answer any questions.

angular.io