HTML, CSS, and JavaScript: These form the fundamental building blocks of web development. HTML structures the content, CSS styles it, and JavaScript adds interactivity. Together, they create dynamic and engaging web experiences.
Python: A versatile language suitable for web development, data...
Disclaimer
GoalKicker.com This is an unocial free book created for educational purposes and is
not aliated with ocial Angular 2+ group(s) or company(s).
Free Programming Books All trademarks and registered trademarks are
the property of their respective owners
,Contents
About ................................................................................................................................................................................... 1
Chapter 1: Getting started with Angular 2+ ..................................................................................................... 2
Section 1.1: Getting started with Angular 2 with node.js/expressjs backend (http example included) ................. 2
Section 1.2: Install angular2 with angular-cli .............................................................................................................. 7
Section 1.3: Getting started with Angular 2 without angular-cli .............................................................................. 10
Section 1.4: Getting through that pesky company proxy ........................................................................................ 14
Section 1.5: Keeping Visual Studios in sync with NPM and NODE Updates .......................................................... 15
Section 1.6: Let's dive into Angular 4! ......................................................................................................................... 16
Chapter 2: Components ........................................................................................................................................... 20
Section 2.1: A simple component ............................................................................................................................... 20
Section 2.2: Templates & Styles ................................................................................................................................. 20
Section 2.3: Testing a Component ............................................................................................................................. 21
Section 2.4: Nesting components .............................................................................................................................. 22
Chapter 3: Component interactions .................................................................................................................. 24
Section 3.1: Pass data from parent to child with input binding ............................................................................... 24
Section 3.2: Parent - Child interaction using @Input & @Output properties ........................................................ 30
Section 3.3: Parent - Child interaction using ViewChild ........................................................................................... 31
Section 3.4: Bidirectional parent-child interaction through a service .................................................................... 32
Chapter 4: Directives ................................................................................................................................................ 35
Section 4.1: *ngFor ....................................................................................................................................................... 35
Section 4.2: Attribute directive ................................................................................................................................... 36
Section 4.3: Component is a directive with template .............................................................................................. 36
Section 4.4: Structural directives ............................................................................................................................... 36
Section 4.5: Custom directive ..................................................................................................................................... 36
Section 4.6: Copy to Clipboard directive ................................................................................................................... 36
Section 4.7: Testing a custom directive ..................................................................................................................... 38
Chapter 5: Page title ................................................................................................................................................. 40
Section 5.1: changing the page title ........................................................................................................................... 40
Chapter 6: Templates ............................................................................................................................................... 41
Section 6.1: Angular 2 Templates ............................................................................................................................... 41
Chapter 7: Commonly built-in directives and services ............................................................................ 42
Section 7.1: Location Class .......................................................................................................................................... 42
Section 7.2: AsyncPipe ................................................................................................................................................ 42
Section 7.3: Displaying current Angular 2 version used in your project ................................................................ 43
Section 7.4: Currency Pipe .......................................................................................................................................... 43
Chapter 8: Directives & components : @Input @Output ........................................................................ 44
Section 8.1: Angular 2 @Input and @Output in a nested component ................................................................... 44
Section 8.2: Input example ......................................................................................................................................... 45
Section 8.3: Angular 2 @Input with asynchronous data ......................................................................................... 46
Chapter 9: Attribute directives to aect the value of properties on the host node by
using the @HostBinding decorator. .................................................................................................................. 48
Section 9.1: @HostBinding .......................................................................................................................................... 48
Chapter 10: How to Use ngif .................................................................................................................................. 49
Section 10.1: To run a function at the start or end of *ngFor loop Using *ngIf ...................................................... 49
Section 10.2: Display a loading message .................................................................................................................. 49
Section 10.3: Show Alert Message on a condition .................................................................................................... 49
, Section 10.4: Use *ngIf with*ngFor ............................................................................................................................. 50
Chapter 11: How to use ngfor ................................................................................................................................ 51
Section 11.1: *ngFor with pipe ...................................................................................................................................... 51
Section 11.2: Unordered list example ......................................................................................................................... 51
Section 11.3: More complext template example ....................................................................................................... 51
Section 11.4: Tracking current interaction example ................................................................................................. 51
Section 11.5: Angular 2 aliased exported values ....................................................................................................... 52
Chapter 12: Angular - ForLoop ............................................................................................................................. 53
Section 12.1: NgFor - Markup For Loop ..................................................................................................................... 53
Section 12.2: *ngFor with component ........................................................................................................................ 53
Section 12.3: Angular 2 for-loop ................................................................................................................................. 53
Section 12.4: *ngFor X amount of items per row ...................................................................................................... 54
Section 12.5: *ngFor in the Table Rows ..................................................................................................................... 54
Chapter 13: Modules .................................................................................................................................................. 55
Section 13.1: A simple module ..................................................................................................................................... 55
Section 13.2: Nesting modules .................................................................................................................................... 55
Chapter 14: Pipes ........................................................................................................................................................ 57
Section 14.1: Custom Pipes .......................................................................................................................................... 57
Section 14.2: Built-in Pipes .......................................................................................................................................... 58
Section 14.3: Chaining Pipes ....................................................................................................................................... 58
Section 14.4: Debugging With JsonPipe .................................................................................................................... 59
Section 14.5: Dynamic Pipe ......................................................................................................................................... 59
Section 14.6: Unwrap async values with async pipe ................................................................................................ 60
Section 14.7: Stateful Pipes ......................................................................................................................................... 61
Section 14.8: Creating Custom Pipe ........................................................................................................................... 62
Section 14.9: Globally Available Custom Pipe ........................................................................................................... 63
Section 14.10: Extending an Existing Pipe .................................................................................................................. 63
Section 14.11: Testing a pipe ........................................................................................................................................ 63
Chapter 15: OrderBy Pipe ....................................................................................................................................... 65
Section 15.1: The Pipe ................................................................................................................................................... 65
Chapter 16: Angular 2 Custom Validations .................................................................................................... 68
Section 16.1: get/set formBuilder controls parameters ........................................................................................... 68
Section 16.2: Custom validator examples: ................................................................................................................. 68
Section 16.3: Using validators in the Formbuilder .................................................................................................... 69
Chapter 17: Routing ................................................................................................................................................... 70
Section 17.1: ResolveData ............................................................................................................................................ 70
Section 17.2: Routing with Children ............................................................................................................................ 72
Section 17.3: Basic Routing ......................................................................................................................................... 73
Section 17.4: Child Routes ........................................................................................................................................... 76
Chapter 18: Routing (3.0.0+) .................................................................................................................................. 78
Section 18.1: Controlling Access to or from a Route ................................................................................................ 78
Section 18.2: Add guard to route configuration ....................................................................................................... 79
Section 18.3: Using Resolvers and Guards ................................................................................................................ 80
Section 18.4: Use Guard in app bootstrap ................................................................................................................ 81
Section 18.5: Bootstrapping ........................................................................................................................................ 81
Section 18.6: Configuring router-outlet ..................................................................................................................... 82
Section 18.7: Changing routes (using templates & directives) ................................................................................ 82
Section 18.8: Setting the Routes ................................................................................................................................. 83
Chapter 19: Dynamically add components using ViewContainerRef.createComponent ...... 85
, Section 19.1: A wrapper component that adds dynamic components declaratively ........................................... 85
Section 19.2: Dynamically add component on specific event(click) ...................................................................... 86
Section 19.3: Rendered dynamically created component array on template HTML in Angular 2 ..................... 87
Chapter 20: Installing 3rd party plugins with angular-cli@1.0.0-beta.10 ....................................... 91
Section 20.1: Add 3rd party library that does not have typings ............................................................................. 91
Section 20.2: Adding jquery library in angular-cli project ...................................................................................... 91
Chapter 21: Lifecycle Hooks .................................................................................................................................. 94
Section 21.1: OnChanges ............................................................................................................................................. 94
Section 21.2: OnInit ...................................................................................................................................................... 94
Section 21.3: OnDestroy .............................................................................................................................................. 94
Section 21.4: AfterContentInit ..................................................................................................................................... 95
Section 21.5: AfterContentChecked ........................................................................................................................... 95
Section 21.6: AfterViewInit ........................................................................................................................................... 95
Section 21.7: AfterViewChecked ................................................................................................................................. 96
Section 21.8: DoCheck ................................................................................................................................................. 96
Chapter 22: Angular RXJS Subjects and Observables with API requests ...................................... 98
Section 22.1: Wait for multiple requests .................................................................................................................... 98
Section 22.2: Basic request ........................................................................................................................................ 98
Section 22.3: Encapsulating API requests ................................................................................................................. 98
Chapter 23: Services and Dependency Injection ...................................................................................... 100
Section 23.1: Example service ................................................................................................................................... 100
Section 23.2: Example with Promise.resolve ........................................................................................................... 101
Section 23.3: Testing a Service ................................................................................................................................ 102
Chapter 24: Service Worker ............................................................................................................................... 105
Section 24.1: Add Service Worker to our app ......................................................................................................... 105
Chapter 25: EventEmitter Service .................................................................................................................... 108
Section 25.1: Catching the event .............................................................................................................................. 108
Section 25.2: Live example ....................................................................................................................................... 109
Section 25.3: Class Component ............................................................................................................................... 109
Section 25.4: Class Overview ................................................................................................................................... 109
Section 25.5: Emmiting Events ................................................................................................................................. 109
Chapter 26: Optimizing rendering using ChangeDetectionStrategy ............................................. 110
Section 26.1: Default vs OnPush ............................................................................................................................... 110
Chapter 27: Angular 2 Forms Update ............................................................................................................ 111
Section 27.1: Angular 2 : Template Driven Forms .................................................................................................. 111
Section 27.2: Angular 2 Form - Custom Email/Password Validation .................................................................. 111
Section 27.3: Simple Password Change Form with Multi Control Validation ...................................................... 113
Section 27.4: Angular 2 Forms ( Reactive Forms ) with registration form and confirm password validation
............................................................................................................................................................................. 114
Section 27.5: Angular 2: Reactive Forms (a.k.a Model-driven Forms) ................................................................. 116
Section 27.6: Angular 2 - Form Builder ................................................................................................................... 117
Chapter 28: Detecting resize events .............................................................................................................. 119
Section 28.1: A component listening in on the window resize event .................................................................... 119
Chapter 29: Testing ngModel ............................................................................................................................. 120
Section 29.1: Basic test .............................................................................................................................................. 120
Chapter 30: Feature Modules ............................................................................................................................. 122
Section 30.1: A Feature Module ................................................................................................................................ 122
Chapter 31: Bootstrap Empty module in angular 2 ................................................................................. 123
The benefits of buying summaries with Stuvia:
Guaranteed quality through customer reviews
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller yashpatel5. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for $7.99. You're not tied to anything after your purchase.
