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
  • Angular Tutorial for Beginners -
  • Creating a Todo-List App
  1. Workshop: Todo List

About

PreviousWelcome to the ngGirls tutorial!Next#0: 💃 Introduction

Last updated 1 year ago

Angular Tutorial for Beginners -

Creating a Todo-List App

This tutorial will take you step by step on how to create your own todo list application using Angular (version 6 and above). Through the tutorial, we'll be using the Angular CLI, save data in the local storage and deploy the code to GitHub Pages.

This tutorial is open source and is written by the community. Please feel free to send any suggestions and pull requests. Special thanks to the members of Angular AfterHours meetup group for kickstarting this tutorial during a !

The tutorial is used in the workshops. You are welcome to use it in your own workshop and we'd love to hear about it! Write to us: .

About the lead author: Shmuela Jacobs is a senior front-end developer and consultant mastering Angular. During her academic studies (M.Sc. in Information Management Engineering and B.Sc. in Physics) she has combined her passions of coding and teaching as a software developer, teaching assistant, science museum guide, and researcher. Today she continues to enjoy these activities as a full-time front-end developer, sharing her knowledge and experience in meetups and conferences. Shmuela is the founder of ngGirls and the organizer of the .

👀
Angular AfterHours meetup group
special meetup event
ngGirls
hello@ng-girls.org