pgadea / ng-advanced-workshop

Advanced Angular patterns training workshop

NgAdvancedWorkshop

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.

Concepts

Here are the Angular concepts covered during this workshop:

• Exercise 1

  • async pipe and the no-subscription pattern
  • Template microsyntax variables for structural directives
  • Template reference variables (hashtag syntax)
  • tap operator from RxJs

• Exercise 2

  • Reactive programming with Observable swapping
  • map operator from RxJs
  • ng-container as an empty DOM wrapper for content to show/hide

• Exercise 3

  • FormControl and how to listen to form updates
  • Creating a custom pipe to format data
  • withLatestFrom operator from RxJs
  • How to combine multiple Observable streams into one
  • Using innerHTML to render dynamically generated HTML code

• Exercise 4

  • switchMap operator from RxJs
  • combineLatest operator from RxJs
  • Using RxJs Subject to create action streams
  • How to combine dynamic Observable streams that evolve over time

• Exercise 5

  • Refactoring HTML templates and TypeScript code into reusable components
  • Creating custom 2-way bindings with the [()] syntax
  • Using Input and Output for component communication

• Exercise 6

  • Creating custom directives
  • Using custom CSS selectors with a directive
  • Using HostBinding and HostListener

• Exercise 7

  • Multi-slot content projection
  • Creating a highly reusable and customizable component

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.