Refresh of Angular 2 Samples

12 October 2016 - Angular, JavaScript, ECMAScript


For a recent web development training I have refreshed a lot of my Angular 2 samples. They are now based on the Angular CLI and Lint warning free. Additionally, I restructured our JavaScript training slides and created new hands-on labs for JavaScript introduction. All the code samples and the slides are available on GitHub.

Angular 2

You can find my Angular2 sample app on GitHub. It has been created with the Angular CLI. Therefore, you can use all the ng tools like serve, lint, etc. with it.

The Basics

The basic samples demonstrate the following aspects of Angular2:


The directive samples demonstrate the following aspects of Angular2:

Dependency Injection

The DI sample demonstrates various aspects of dependency injection in Angular2.


The forms sample demonstrates various aspects of defining forms in Angular2. It also contains a custom directive with a custom validator.

Master Detail

The master-detail sample demonstrate the following aspects of Angular2:

  • Child routes (app.routes.ts)
  • Route parameters
  • Implementing a data access service with Angular’s Http class
  • RxJS basics
  • Various template features, in particular binding scenarios


Our sample application contains a sample for routing. We use the routes to navigate to the samples mentioned above.


  • Our GitHub repository contains a large number of small JavaScript samples that we use (slightly modified depending on the existing knowledge and special interests of attendees) during JavaScript trainings.

  • The hands-on-labs are small samples that attendees can create during a training. Depending on the attendees, we often build ad hoc variants (e.g. Angular version, ECMAScript 2015 version, etc.) of these labs during trainings.

  • The repository also contains some slides. However, I recommend sticking to the content mentioned above. The slides are just a summary of it.