ng-girls / todo-list-tutorial

Build your own todo-list app with Angular - tutorial for beginners

description
You can follow this tutorial by yourself at anytime. We'd love to receive your feedback!

Welcome to the ngGirls tutorial!

Creating a Todo-List App

This tutorial will take you step by step on how to create your own todo list application using Angular. Through the tutorial, we'll be using the Angular CLI, create an to-do-list application, save data in the local storage and deploy the application either to Azure Static Web Apps or GitHub Pages.

This tutorial is open source and is written by the community. Please feel free to send any suggestions and pull requests: https://github.com/ng-girls/todo-list-tutorial. Special thanks to the members of Angular AfterHours meetup group for kickstarting this tutorial during a special meetup event!

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

About ngGirls founder and the lead author of this tutorial: 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 Cloud Advocate at Microsoft, developing Angular apps with Azure and sharing her knowledge and experience in online media, meetups and conferences. Shmuela is the founder of ngGirls and the organizer of the Angular AfterHours meetup group.

todo-list-tutorial's Issues

Broken link in the tutorial - component chapter

In this page
https://ng-girls.gitbook.io/todo-list-tutorial/workshop-todo-list/a-new-component/stackblitz
the link to the "#3 component chapter"
https://ng-girls.gitbook.io/todo-list-tutorial/component#inline-template
is broken

The same, at the end, the link "continue the tutorial"
https://ng-girls.gitbook.io/todo-list-tutorial/a-new-component/README.md
is broken

I think it is missing "workshop-todo-list/" in the URLs

Missing images in the tutorial pages

I noticed that there are some missing images in the turtorial pages here: https://ng-girls.gitbook.io/todo-list-tutorial/more-workshops/crud_http/crudalize_diagrams.
Thank you

Event name is not the same through the tutorial

submitItem event should be submit in https://ng-girls.gitbook.io/todo-list-tutorial/more-workshops/crud_http/get

And that to make it consistent with the the first part of the tutorial:
https://ng-girls.gitbook.io/todo-list-tutorial/workshop-todo-list/add-items

<div class="todo-app">
  <app-input-button-unit (submitItem)="addItem($event)"></app-input-button-unit>

  <ul *ngIf="todoList | async as todoItems">
    <li *ngFor="let todoItem of todoItems">
      <app-todo-item [item]="todoItem"
                     (remove)="removeItem($event)"
                     (update)="updateItem($event.item, $event.changes)"></app-todo-item>
    </li>
  </ul>
</div>

Please add a LICENSE

This repository does not have a LICENSE which means we can no longer list it on https://devlibrary.withgoogle.com/ and makes it harder for people to use with confidence.

If you add a license (Apache 2.0 or MIT) please file an issue on https://github.com/google/devlibrary so that we can add your project to the site.

fix: update stackblitz samples

Broken link in the tutorial - Interface (Stackblitz instructions)

Similar to issue #228:

In this page
https://ng-girls.gitbook.io/todo-list-tutorial/workshop-todo-list/interface/stackblitz
the link to "continue the tutorial"
https://ng-girls.gitbook.io/todo-list-tutorial/interface/README.md
is broken

Event binding (#7) > The $event object compilation error

https://ng-girls.gitbook.io/todo-list-tutorial/workshop-todo-list/event-binding#the-usdevent-object uses the following code:

<input [value]="title"
       (keyup)="changeTitle($event.target.value)">

However, as of now this results in a compilation error of Property 'value' does not exist on type 'EventTarget' in the separate HTML component.

Changing it to the following resolves the issue, but is less than ideal.

<input [value]="title"
       (keyup)="changeTitle($any($event.target).value)">

Since it's not ideal, not submitting a merge request as there may be a better way to handle this.

The following section, Pressing the Enter key, has a similar issue.

fix: adding more description and screenshot for adding components in stackblitz

feat: discuss app.routes.ts in angular 17

should we skip or include?