/angular-todo-list-tutorial

Tutorial from https://ng-girls.gitbook.io/todo-list-tutorial/

Primary LanguageTypeScript

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.