The tutorials I've read to learn Angular 2-4

Here is a curated list of some good tutorials we used to learn the version 2 of angular.

Web components

General

Data binding

  • Custom text area, input… data binding

http://lishman.io/angular-2-input-binding

Forms

https://toddmotto.com/angular-2-form-controls-patch-value-set-value

Reactive forms or model driven fields

Forms fields

Events / Change detection

Components

viewChildren

Components @input

Component ngInit vs constructor

Dynamic components

Communication between components

Ng-template, ng-container, ng-template-outlet

DOM

  • How to use the angular 2 renderer service to manipulate the DOM in a way all platforms (server, browser, mobile.. can accept)

https://netbasal.com/angular-2-explore-the-renderer-service-e43ef673b26c#.mah8emsrl

  • How to use window like with the good old $window angular 1

In this tuto, you learn how to do a wrapper of window to inject in with DI only if usable (in the browser)

https://juristr.com/blog/2016/09/ng2-get-window-ref/

Directives

http://www.talkingdotnet.com/dont-use-hidden-attribute-angularjs-2

Observables / RxJS

Angular 2 adopted this new concept of observable which basically is a more advanced form of promise. RxJs is the implementation of Observable used by angular which is being developed by Microsoft.

  • This post list 3 common problems with can have with observable.

  • Pitfall 1 : not subscribing to an observable is similar to having a function but not exucuting it

An observable itself is just a definition of a way to handle a stream of values. We can think of it as something close to a function. Creating an observable is somewhat similar to declaring a function, the function itself is just a declaration. Calling the function is something entirely different, as defining a function does not execute its code.

We need to call the function in order for something to happen, and that is also the case with an Observable: we need to subscribe to it in order for it to work!

http://blog.angular-university.io/angular-2-rxjs-common-pitfalls/

ngFor, ngIf, …

  • Revision of what ngFor can do
    • how to get the index
    • how to track by another value that default (by object Identity)
    • using odd, even, last, first for dynamic class naming

ngFor by default tracks list items using object identity. This means that if you build a list of new objects from scratch with the exact same values as the previous list and pass this newly built list to ngFor, Angular will not be able to tell that a given list item is already present or not.

http://blog.angular-university.io/angular-2-ngfor/

Redux inspired rxjs store

Modules

Organize your code in a modular way. Import a module instead of importing a dozen of files (javascript modules). Despite of the use of ES6 modules in angular, angular modules @ngModules are still useful to bundle a feature or a shared utility together.

http://blog.angular-university.io/angular2-ngmodule/

  • the official style guide module section

https://angular.io/styleguide#!#application-structure-and-angular-modules

components styling css

Decorator / Annotation syntax [Typescript]

Dependency injection

Pipes

Router

ES 6

Typescript

  • Detailed explanation about how the modules resolution works for the typescript compiler. How typescript find a module when we write something like :
    // Relative import
    import { Component, Input }   from '@angular/core';
    // Non relative  import
    import { OptionService }      from '../../../services/api/option.service';
    

https://www.typescriptlang.org/docs/handbook/module-resolution.html

System.js / JSPM

Angular 2 & firebase

AOT Ahead of Time Compilation

Integration of external library / Jquery

Angular CLI

  • The ultimate guide of angular CLI

https://www.sitepoint.com/ultimate-angular-cli-reference/

New release

### Stripe integration

Commits, git….

Tests

Webpack build

Zones & ngZone

Progressive web app

Responsive

Theming

Allow to use angular material theming abstraction (you do not need to use other aspect of material if you do not want). Though it complicate a bit the scss handling, it is a great enhancement for let's say use case where you want to customize your app for your clients, or allow the user to change it's profile visual aspect. Angular material have an opinated but intelligent way of handling colors, that is portable is different environment : mobile, desktop....

Error handler

Written on December 15, 2016