AngularTodoListTutorial

This project was generated with Angular CLI version 12.0.5.

This is following the tutorial from https://ng-girls.gitbook.io/todo-list-tutorial/ in late June 2021.

Tutorial notes

• ng g c input-button-unit is the same as ng generate component input-button-unit.
• input [value] is one-way binding, while input [(ngModel)] can be one or two-way binding. The latter also adds a lot more functionality.
• Element event binding = parens and dropping the on.
• #variableName can be used to store a reference to an element. For example <input #inputElementRef /> and then <button (click)="doAThing(inputElementRef.value)">Do</button>
• ng g i interfaces/todo-item for creating interfaces.
• ng g s services/todo-list for creating services.
• Event emitting:
  • define on the component that generates it (@Output())
  • parent component (output variable name) it on component element
  • parent component handles as needed
  • see TodoItemComponent and ListManagerComponent

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.