ng-book: The Complete Book on Angular 5

683 Pages·2018·24.36 MB·English

ng-book
The Complete Guide to Angular
Written by Nate Murray, Felipe Coury, Ari Lerner, and Carlos Taborda
© 2018 Fullstack.io
All rights reserved. No portion of the book manuscript may be reproduced, stored in a retrieval
system, or transmitted in any form or by any means beyond the number of purchased copies,
except for a single backup or archival copy. The code may be used freely in your projects,
commercial or otherwise.
The authors and publisher have taken care in preparation of this book, but make no expressed
or implied warranty of any kind and assume no responsibility for errors or omissions. No
liability is assumed for incidental or consequential damagers in connection with or arising out
of the use of the information or programs container herein.
Published in San Francisco, California by Fullstack.io.

FULLSTACK.io
We’d like to thank:
• Our technical editors: Frode Fikke, Travas Nolte, Daniel Rauf
• Nic Raboy, and Burke Holland for contributing the NativeScript chapter
Contents
BookRevision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
BugReports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
ChatWithTheCommunity! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
VoteforNewContent(new!) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
BenotifiedofupdatesviaTwitter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
We’dlovetohearfromyou! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
HowtoReadThisBook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
RunningCodeExamples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
AngularCLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
CodeBlocksandContext . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
CodeBlockNumbering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
AWordonVersioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
GettingHelp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
EmailingUs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
TechnicalSupportResponseTime . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
ChapterOverview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
WritingYourFirstAngularWebApplication . . . . . . . . . . . . . . . . . . . . . . . . . 1
SimpleRedditClone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Gettingstarted . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Node.jsandnpm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
SpecialinstructionforWindowsusers . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
AngularCLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
ExampleProject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
WritingApplicationCode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Runningtheapplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
MakingaComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
ImportingDependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
ComponentDecorators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
AddingatemplatewithtemplateUrl . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Addingatemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
CONTENTS
AddingCSSStyleswithstyleUrls . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
LoadingOurComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
AddingDatatotheComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
WorkingWithArrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
UsingtheUserItemComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
RenderingtheUserItemComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
AcceptingInputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
PassinganInputvalue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
BootstrappingCrashCourse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
declarations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
imports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
providers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
ExpandingourApplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
AddingCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
TheApplicationComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
AddingInteraction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
AddingtheArticleComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
RenderingMultipleRows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
CreatinganArticleclass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
StoringMultipleArticles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
ConfiguringtheArticleComponentwithinputs . . . . . . . . . . . . . . . . . . . . . 53
RenderingaListofArticles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
AddingNewArticles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
FinishingTouches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
DisplayingtheArticleDomain . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Re-sortingBasedonScore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Deployment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
BuildingOurAppforProduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
UploadingtoaServer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Installingnow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
FullCodeListing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
WrappingUp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
GettingHelp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
AngularisbuiltinTypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
WhatdowegetwithTypeScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
TryingitoutwithaREPL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Built-intypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
CONTENTS
Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Constructors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Utilities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
FatArrowFunctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
TemplateStrings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Wrappingup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
HowAngularWorks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
TheNavigationComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
TheBreadcrumbsComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
TheProductListComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
HowtoUseThisChapter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
ProductModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
ComponentDecorator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Componentselector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Componenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
AddingAProduct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
ViewingtheProductwithTemplateBinding . . . . . . . . . . . . . . . . . . . . . . . 91
AddingMoreProducts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
SelectingaProduct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Listingproductsusing<products-list> . . . . . . . . . . . . . . . . . . . . . . . . . 94
TheProductsListComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
ConfiguringtheProductsListComponent@ComponentOptions . . . . . . . . . . . . . 98
Componentinputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Componentoutputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
EmittingCustomEvents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
WritingtheProductsListComponentControllerClass . . . . . . . . . . . . . . . . . . 103
WritingtheProductsListComponentViewTemplate . . . . . . . . . . . . . . . . . . . 104
TheFullProductsListComponentComponent . . . . . . . . . . . . . . . . . . . . . . 106
TheProductRowComponentComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
ProductRowComponentConfiguration . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
ProductRowComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
TheProductImageComponentComponent . . . . . . . . . . . . . . . . . . . . . . . . . . 111
ThePriceDisplayComponentComponent . . . . . . . . . . . . . . . . . . . . . . . . . . 111
TheProductDepartmentComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
NgModuleandBootingtheApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Bootingtheapp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
TheCompletedProject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
DeployingtheApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
AWordonDataArchitecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
CONTENTS
Built-inDirectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
NgIf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
NgSwitch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
NgStyle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
NgClass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
NgFor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Gettinganindex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
NgNonBindable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
FormsinAngular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
FormsareCrucial,FormsareComplex . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
FormControlsandFormGroups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
FormControl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
FormGroup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
OurFirstForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
LoadingtheFormsModule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
SimpleSKUForm:@ComponentDecorator . . . . . . . . . . . . . . . . . . . . . . . 140
SimpleSKUForm:template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
SimpleSKUForm:ComponentDefinitionClass . . . . . . . . . . . . . . . . . . . . . 144
Tryitout! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
UsingFormBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
ReactiveFormswithFormBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
UsingFormBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
UsingmyFormintheview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Tryitout! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
AddingValidations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
ExplicitlysettingtheskuFormControlasaninstancevariable . . . . . . . . . . . . . 152
CustomValidations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
WatchingForChanges. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
ngModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
WrappingUp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
DependencyInjection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
InjectionsExample:PriceService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
DependencyInjectionParts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
PlayingwithanInjector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
ProvidingDependencieswithNgModule . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
ProvidersaretheKey . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Providers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
UsingaClass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
UsingaFactory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
CONTENTS
DependencyInjectioninApps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
MoreResources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Using@angular/common/http . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
importfrom@angular/common/http . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
ABasicRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
BuildingtheSimpleHttpComponentComponentDefinition . . . . . . . . . . . . . . . 189
BuildingtheSimpleHttpComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . 189
BuildingtheSimpleHttpComponentController . . . . . . . . . . . . . . . . . . . . . . 190
FullSimpleHttpComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
WritingaYouTubeSearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
WritingaSearchResult . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
WritingtheYouTubeSearchService . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
WritingtheSearchBoxComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
WritingSearchResultComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
WritingYouTubeSearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
@angular/common/httpAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
MakingaPOSTrequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
PUT/PATCH/DELETE/HEAD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
CustomHTTPHeaders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
WhyDoWeNeedRouting? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Howclient-sideroutingworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Thebeginning:usinganchortags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Theevolution:HTML5client-siderouting . . . . . . . . . . . . . . . . . . . . . . . . 217
Writingourfirstroutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
ComponentsofAngularrouting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Imports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
InstallingourRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
RouterOutletusing<router-outlet> . . . . . . . . . . . . . . . . . . . . . . . . . . 221
RouterLinkusing[routerLink] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Puttingitalltogether . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
CreatingtheComponents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
HomeComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
AboutComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
ContactComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
ApplicationComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
ConfiguringtheRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
CONTENTS
RoutingStrategies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Runningtheapplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
RouteParameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
ActivatedRoute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
MusicSearchApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
FirstSteps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
TheSpotifyService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
TheSearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Tryingthesearch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
TrackComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Wrappingupmusicsearch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
RouterHooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
AuthService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
LoginComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
ProtectedComponentandRouteGuards . . . . . . . . . . . . . . . . . . . . . . . . . . 256
NestedRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
ConfiguringRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
ProductsModule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
DataArchitectureinAngular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
AnOverviewofDataArchitecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
DataArchitectureinAngular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
DataArchitecturewithObservables-Part1:Services . . . . . . . . . . . . . . . . . . . . 272
ObservablesandRxJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Note:SomeRxJSKnowledgeRequired . . . . . . . . . . . . . . . . . . . . . . . . . . 272
LearningReactiveProgrammingandRxJS . . . . . . . . . . . . . . . . . . . . . . . . 272
ChatAppOverview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
ImplementingtheModels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
User . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Thread . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Message . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279
ImplementingUsersService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
currentUserstream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Settinganewuser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
UsersService.ts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
TheMessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
thenewMessagesstream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
CONTENTS
themessagesstream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
TheOperationStreamPattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
SharingtheStream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
AddingMessagestothemessagesStream . . . . . . . . . . . . . . . . . . . . . . . . . 289
OurcompletedMessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
TryingoutMessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
TheThreadsService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Amapofthecurrentsetof Threads(inthreads) . . . . . . . . . . . . . . . . . . . . . 297
Achronologicallistof Threads,newest-first(inorderedthreads) . . . . . . . . . . . . 302
ThecurrentlyselectedThread(incurrentThread) . . . . . . . . . . . . . . . . . . . . 302
Thelistof MessagesforthecurrentlyselectedThread(incurrentThreadMessages) . . 304
OurCompletedThreadsService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
DataModelSummary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
DataArchitecturewithObservables-Part2:ViewComponents . . . . . . . . . . . . . . 310
BuildingOurViews:TheAppComponentTop-LevelComponent . . . . . . . . . . . . . . . 310
TheChatThreadsComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
ChatThreadsComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
TheSingleChatThreadComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
ChatThreadComponentControllerandngOnInit . . . . . . . . . . . . . . . . . . . . . 316
ChatThreadComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
TheChatWindowComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
TheChatMessageComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
TheChatMessageComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
TheChatNavBarComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
TheChatNavBarComponent@Component . . . . . . . . . . . . . . . . . . . . . . . . . . 330
TheChatNavBarComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . 332
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
IntroductiontoReduxwithTypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336
Redux:KeyIdeas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336
CoreReduxIdeas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
What’sareducer? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
DefiningActionandReducerInterfaces . . . . . . . . . . . . . . . . . . . . . . . . . 338
CreatingOurFirstReducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
RunningOurFirstReducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339
AdjustingtheCounterWithactions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340
Reducerswitch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
Action“Arguments” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343
StoringOurState . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
UsingtheStore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
BeingNotifiedwithsubscribe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345