Angular 2+ Notes for Professionals

Content list
About
Chapter 1: Getting started with Angular 2+
Section 1.1: Getting started with Angular 2 with node.js/expressjs backend (http example included)
Section 1.2: Install angular2 with angular-cli
Section 1.3: Getting started with Angular 2 without angular-cli
Section 1.4: Getting through that pesky company proxy
Section 1.5: Keeping Visual Studios in sync with NPM and NODE Updates
Section 1.6: Let's dive into Angular 4!
Chapter 2: Components
Section 2.1: A simple component
Section 2.2: Templates & Styles
Section 2.3: Testing a Component
Section 2.4: Nesting components
Chapter 3: Component interactions
Section 3.1: Pass data from parent to child with input binding
Section 3.2: Parent - Child interaction using @Input & @Output properties
Section 3.3: Parent - Child interaction using ViewChild
Section 3.4: Bidirectional parent-child interaction through a service
Chapter 4: Directives
Section 4.1: *ngFor
Section 4.2: Attribute directive
Section 4.3: Component is a directive with template
Section 4.4: Structural directives
Section 4.5: Custom directive
Section 4.6: Copy to Clipboard directive
Section 4.7: Testing a custom directive
Chapter 5: Page title
Section 5.1: changing the page title
Chapter 6: Templates
Section 6.1: Angular 2 Templates
Chapter 7: Commonly built-in directives and services
Section 7.1: Location Class
Section 7.2: AsyncPipe
Section 7.3: Displaying current Angular 2 version used in your project
Section 7.4: Currency Pipe
Chapter 8: Directives & components : @Input @Output
Section 8.1: Angular 2 @Input and @Output in a nested component
Section 8.2: Input example
Section 8.3: Angular 2 @Input with asynchronous data
Chapter 9: Attribute directives to aect the value of properties on the host node by using the @HostBinding decorator.
Section 9.1: @HostBinding
Chapter 10: How to Use ngif
Section 10.1: To run a function at the start or end of *ngFor loop Using *ngIf
Section 10.2: Display a loading message
Section 10.3: Show Alert Message on a condition
Section 10.4: Use *ngIf with*ngFor
Chapter 11: How to use ngfor
Section 11.1: *ngFor with pipe
Section 11.2: Unordered list example
Section 11.3: More complext template example
Section 11.4: Tracking current interaction example
Section 11.5: Angular 2 aliased exported values
Chapter 12: Angular - ForLoop
Section 12.1: NgFor - Markup For Loop
Section 12.2: *ngFor with component
Section 12.3: Angular 2 for-loop
Section 12.4: *ngFor X amount of items per row
Section 12.5: *ngFor in the Table Rows
Chapter 13: Modules
Section 13.1: A simple module
Section 13.2: Nesting modules
Chapter 14: Pipes
Section 14.1: Custom Pipes
Section 14.2: Built-in Pipes
Section 14.3: Chaining Pipes
Section 14.4: Debugging With JsonPipe
Section 14.5: Dynamic Pipe
Section 14.6: Unwrap async values with async pipe
Section 14.7: Stateful Pipes
Section 14.8: Creating Custom Pipe
Section 14.9: Globally Available Custom Pipe
Section 14.10: Extending an Existing Pipe
Section 14.11: Testing a pipe
Chapter 15: OrderBy Pipe
Section 15.1: The Pipe
Chapter 16: Angular 2 Custom Validations
Section 16.1: get/set formBuilder controls parameters
Section 16.2: Custom validator examples:
Section 16.3: Using validators in the Formbuilder
Chapter 17: Routing
Section 17.1: ResolveData
Section 17.2: Routing with Children
Section 17.3: Basic Routing
Section 17.4: Child Routes
Chapter 18: Routing (3.0.0+)
Section 18.1: Controlling Access to or from a Route
Section 18.2: Add guard to route configuration
Section 18.3: Using Resolvers and Guards
Section 18.4: Use Guard in app bootstrap
Section 18.5: Bootstrapping
Section 18.6: Configuring router-outlet
Section 18.7: Changing routes (using templates & directives)
Section 18.8: Setting the Routes
Chapter 19: Dynamically add components using ViewContainerRef.createComponent
Section 19.1: A wrapper component that adds dynamic components declaratively
Section 19.2: Dynamically add component on specific event(click)
Section 19.3: Rendered dynamically created component array on template HTML in Angular 2
Chapter 20: Installing 3rd party plugins with angular-cli@1.0.0-beta.10
Section 20.1: Add 3rd party library that does not have typings
Section 20.2: Adding jquery library in angular-cli project
Chapter 21: Lifecycle Hooks
Section 21.1: OnChanges
Section 21.2: OnInit
Section 21.3: OnDestroy
Section 21.4: AfterContentInit
Section 21.5: AfterContentChecked
Section 21.6: AfterViewInit
Section 21.7: AfterViewChecked
Section 21.8: DoCheck
Chapter 22: Angular RXJS Subjects and Observables with API requests
Section 22.1: Wait for multiple requests
Section 22.2: Basic request
Section 22.3: Encapsulating API requests
Chapter 23: Services and Dependency Injection
Section 23.1: Example service
Section 23.2: Example with Promise.resolve
Section 23.3: Testing a Service
Chapter 24: Service Worker
Section 24.1: Add Service Worker to our app
Chapter 25: EventEmitter Service
Section 25.1: Catching the event
Section 25.2: Live example
Section 25.3: Class Component
Section 25.4: Class Overview
Section 25.5: Emmiting Events
Chapter 26: Optimizing rendering using ChangeDetectionStrategy
Section 26.1: Default vs OnPush
Chapter 27: Angular 2 Forms Update
Section 27.1: Angular 2 : Template Driven Forms
Section 27.2: Angular 2 Form - Custom Email/Password Validation
Section 27.3: Simple Password Change Form with Multi Control Validation
Section 27.4: Angular 2 Forms ( Reactive Forms ) with registration form and confirm password validation
Section 27.5: Angular 2: Reactive Forms (a.k.a Model-driven Forms)
Section 27.6: Angular 2 - Form Builder
Chapter 28: Detecting resize events
Section 28.1: A component listening in on the window resize event
Chapter 29: Testing ngModel
Section 29.1: Basic test
Chapter 30: Feature Modules
Section 30.1: A Feature Module
Chapter 31: Bootstrap Empty module in angular 2
Section 31.1: An empty module
Section 31.2: Application Root Module
Section 31.3: Bootstrapping your module
Section 31.4: A module with networking on the web browser
Section 31.5: Static bootstrapping with factory classes
Chapter 32: Lazy loading a module
Section 32.1: Lazy loading example
Chapter 33: Advanced Component Examples
Section 33.1: Image Picker with Preview
Section 33.2: Filter out table values by the input
Chapter 34: Bypassing Sanitizing for trusted values
Section 34.1: Bypassing Sanitizing with pipes (for code re-use)
Chapter 35: Angular 2 Data Driven Forms
Section 35.1: Data driven form
Chapter 36: Angular 2 In Memory Web API
Section 36.1: Setting Up Multiple Test API Routes
Section 36.2: Basic Setup
Chapter 37: Ahead-of-time (AOT) compilation with Angular 2
Section 37.1: Why we need compilation, Flow of events compilation and example?
Section 37.2: Using AoT Compilation with Angular CLI
Section 37.3: Install Angular 2 dependencies with compiler
Section 37.4: Add `angularCompilerOptions` to your `tsconfig.json` file
Section 37.5: Run ngc, the angular compiler
Section 37.6: Modify `main.ts` file to use NgFactory and static platform browser
Chapter 38: CRUD in Angular 2 with Restful API
Section 38.1: Read from an Restful API in Angular 2
Chapter 39: Use native webcomponents in Angular 2
Section 39.1: Include custom elements schema in your module
Section 39.2: Use your webcomponent in a template
Chapter 40: Update typings
Section 40.1: Update typings when: typings WARN deprecated
Chapter 41: Mocking @ngrx/Store
Section 41.1: Unit Test For Component With Mock Store
Section 41.2: Angular 2 - Mock Observable ( service + component )
Section 41.3: Observer Mock
Section 41.4: Unit Test For Component Spying On Store
Section 41.5: Simple Store
Chapter 42: ngrx
Section 42.1: Complete example : Login/logout a user
Chapter 43: Http Interceptor
Section 43.1: Using our class instead of Angular's Http
Section 43.2: Simple Class Extending angular's Http class
Section 43.3: Simple HttpClient AuthToken Interceptor (Angular 4.3+)
Chapter 44: Animation
Section 44.1: Transition between null states
Section 44.2: Animating between multiple states
Chapter 45: Zone.js
Section 45.1: Getting reference to NgZone
Section 45.2: Using NgZone to do multiple HTTP requests before showing the data
Chapter 46: Angular 2 Animations
Section 46.1: Basic Animation - Transitions an element between two states driven by a model attribute
Chapter 47: Create an Angular 2+ NPM package
Section 47.1: Simplest package
Chapter 48: Angular 2 CanActivate
Section 48.1: Angular 2 CanActivate
Chapter 49: Angular 2 - Protractor
Section 49.1: Angular 2 Protractor - Installation
Section 49.2: Testing Navbar routing with Protractor
Chapter 50: Example for routes such as /route/subroute for static urls
Section 50.1: Basic route example with sub routes tree
Chapter 51: Angular 2 Input() output()
Section 51.1: Input()
Section 51.2: Simple example of Input Properties
Chapter 52: Angular-cli
Section 52.1: New project with scss/sass as stylesheet
Section 52.2: Set yarn as default package manager for @angular/cli
Section 52.3: Create empty Angular 2 application with angular-cli
Section 52.4: Generating Components, Directives, Pipes and Services
Section 52.5: Adding 3rd party libs
Section 52.6: build with angular-cli
Chapter 53: Angular 2 Change detection and manual triggering
Section 53.1: Basic example
Chapter 54: Angular 2 Databinding
Section 54.1: @Input()
Chapter 55: Brute Force Upgrading
Section 55.1: Scaolding a New Angular CLI Project
Chapter 56: Angular 2 provide external data to App before bootstrap
Section 56.1: Via Dependency Injection
Chapter 57: custom ngx-bootstrap datepicker + input
Section 57.1: custom ngx-bootstrap datepicker
Chapter 58: Using third party libraries like jQuery in Angular 2
Section 58.1: Configuration using angular-cli
Section 58.2: Using jQuery in Angular 2.x components
Chapter 59: Configuring ASP.net Core application to work with Angular 2 and TypeScript
Section 59.1: Asp.Net Core + Angular 2 + Gulp
Section 59.2: [Seed] Asp.Net Core + Angular 2 + Gulp on Visual Studio 2017
Section 59.3: MVC <-> Angular 2
Chapter 60: Angular 2 using webpack
Section 60.1: Angular 2 webpack setup
Chapter 61: Angular material design
Section 61.1: Md2Accordion and Md2Collapse
Section 61.2: Md2Select
Section 61.3: Md2Toast
Section 61.4: Md2Datepicker
Section 61.5: Md2Tooltip
Chapter 62: Dropzone in Angular 2
Section 62.1: Dropzone
Chapter 63: angular redux
Section 63.1: Basic
Section 63.2: Get current state
Section 63.3: change state
Section 63.4: Add redux chrome tool
Chapter 64: Creating an Angular npm library
Section 64.1: Minimal module with service class
Chapter 65: Barrel
Section 65.1: Using Barrel
Chapter 66: Testing an Angular 2 App
Section 66.1: Setting up testing with Gulp, Webpack, Karma and Jasmine
Section 66.2: Installing the Jasmine testing framework
Section 66.3: Testing Http Service
Section 66.4: Testing Angular Components - Basic
Chapter 67: angular-cli test coverage
Section 67.1: A simple angular-cli command base test coverage
Section 67.2: Detailed individual component base graphical test coverage reporting
Chapter 68: Debugging Angular 2 TypeScript application using Visual Studio Code
Section 68.1: Launch.json setup for you workspace
Chapter 69: unit testing
Section 69.1: Basic unit test
Credits
You may also like

The Angular 2+ Notes for Professionals book is compiled from Stack Overflow Documentation, the content is written by the beautiful people at Stack Overflow.

This open book is licensed under a Creative Commons License (CC BY-SA).