Refresh of Angular 2 Samples
The basic samples demonstrate the following aspects of Angular2:
- home.component.ts shows how to use an external template file.
- hello-world.component.ts shows how to use an embedded template with interpolation.
- template.component.ts shows various aspects of templates and data binding (e.g. interpolation, two-way data binding, class and style bindings, etc.).
- input-output.component.ts shows how to use
@Outputto connect components.
The directive samples demonstrate the following aspects of Angular2:
- ngFor.component.ts shows how to use
*ngForin templates. It also contains simple demos for bindings (e.g. event bindings with
click, style bindings, etc.).
- ngIf.component.ts shows how to use
*ngIfin templates. It also shows how to bind inputs without having to write TypeScript code.
- view-encapsulation.component.ts shows how view encapsulation works (emulated and native).
- rsTooltip.directive.ts shows how to create a custom attribute directive.
- upper-lowercase.pipe.ts shows how to create a custom pipe.
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.
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
- 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.
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.