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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 ComponentDecorators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 AddingatemplatewithtemplateUrl . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Addingatemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 CONTENTS AddingCSSStyleswithstyleUrls . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 LoadingOurComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 AddingDatatotheComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 WorkingWithArrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 UsingtheUserItemComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 RenderingtheUserItemComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 AcceptingInputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 PassinganInputvalue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 BootstrappingCrashCourse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 declarations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 imports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 providers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 ExpandingourApplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 AddingCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 TheApplicationComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 AddingInteraction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 AddingtheArticleComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 RenderingMultipleRows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 CreatinganArticleclass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 StoringMultipleArticles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 ConfiguringtheArticleComponentwithinputs . . . . . . . . . . . . . . . . . . . . . 54 RenderingaListofArticles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 AddingNewArticles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 FinishingTouches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 DisplayingtheArticleDomain . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Re-sortingBasedonScore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Deployment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 BuildingOurAppforProduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 UploadingtoaServer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Installingnow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 FullCodeListing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 WrappingUp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 GettingHelp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 AngularisbuiltinTypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 WhatdowegetwithTypeScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 TryingitoutwithaREPL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Built-intypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 CONTENTS Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Constructors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Utilities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 FatArrowFunctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 TemplateStrings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Wrappingup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 HowAngularWorks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 TheNavigationComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 TheBreadcrumbsComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 TheProductListComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 HowtoUseThisChapter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 ProductModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 ComponentDecorator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 Componentselector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 Componenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 AddingAProduct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 ViewingtheProductwithTemplateBinding . . . . . . . . . . . . . . . . . . . . . . . 92 AddingMoreProducts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 SelectingaProduct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Listingproductsusing<products-list> . . . . . . . . . . . . . . . . . . . . . . . . . 95 TheProductsListComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 ConfiguringtheProductsListComponent@ComponentOptions . . . . . . . . . . . . . 99 Componentinputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Componentoutputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 EmittingCustomEvents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 WritingtheProductsListComponentControllerClass . . . . . . . . . . . . . . . . . . 104 WritingtheProductsListComponentViewTemplate . . . . . . . . . . . . . . . . . . . 105 TheFullProductsListComponentComponent . . . . . . . . . . . . . . . . . . . . . . 107 TheProductRowComponentComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 ProductRowComponentConfiguration . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 ProductRowComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 TheProductImageComponentComponent . . . . . . . . . . . . . . . . . . . . . . . . . . 112 ThePriceDisplayComponentComponent . . . . . . . . . . . . . . . . . . . . . . . . . . 112 TheProductDepartmentComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 NgModuleandBootingtheApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Bootingtheapp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 TheCompletedProject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 DeployingtheApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 AWordonDataArchitecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 CONTENTS Built-inDirectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 NgIf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 NgSwitch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 NgStyle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 NgClass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 NgFor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Gettinganindex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 NgNonBindable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 FormsinAngular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 FormsareCrucial,FormsareComplex . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 FormControlsandFormGroups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 FormControl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 FormGroup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 OurFirstForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 LoadingtheFormsModule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 SimpleSKUForm:@ComponentDecorator . . . . . . . . . . . . . . . . . . . . . . . 141 SimpleSKUForm:template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 SimpleSKUForm:ComponentDefinitionClass . . . . . . . . . . . . . . . . . . . . . 145 Tryitout! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 UsingFormBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 ReactiveFormswithFormBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 UsingFormBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 UsingmyFormintheview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Tryitout! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 AddingValidations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 ExplicitlysettingtheskuFormControlasaninstancevariable . . . . . . . . . . . . . 153 CustomValidations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 WatchingForChanges. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 ngModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 WrappingUp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 DependencyInjection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 InjectionsExample:PriceService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 DependencyInjectionParts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170 PlayingwithanInjector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 ProvidingDependencieswithNgModule . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 ProvidersaretheKey . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 Providers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 UsingaClass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 UsingaFactory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 CONTENTS DependencyInjectioninApps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 MoreResources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 Using@angular/common/http . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 importfrom@angular/common/http . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 ABasicRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 BuildingtheSimpleHttpComponentComponentDefinition . . . . . . . . . . . . . . . 190 BuildingtheSimpleHttpComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . 190 BuildingtheSimpleHttpComponentController . . . . . . . . . . . . . . . . . . . . . . 191 FullSimpleHttpComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 WritingaYouTubeSearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 WritingaSearchResult . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 WritingtheYouTubeSearchService . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196 WritingtheSearchBoxComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 WritingSearchResultComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 WritingYouTubeSearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 @angular/common/httpAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 MakingaPOSTrequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 PUT/PATCH/DELETE/HEAD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 CustomHTTPHeaders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 WhyDoWeNeedRouting? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 Howclient-sideroutingworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Thebeginning:usinganchortags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Theevolution:HTML5client-siderouting . . . . . . . . . . . . . . . . . . . . . . . . 218 Writingourfirstroutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 ComponentsofAngularrouting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Imports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 InstallingourRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 RouterOutletusing<router-outlet> . . . . . . . . . . . . . . . . . . . . . . . . . . 222 RouterLinkusing[routerLink] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 Puttingitalltogether . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 CreatingtheComponents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 HomeComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 AboutComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 ContactComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 ApplicationComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 ConfiguringtheRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 CONTENTS RoutingStrategies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 Runningtheapplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232 RouteParameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 ActivatedRoute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 MusicSearchApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 FirstSteps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 TheSpotifyService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 TheSearchComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Tryingthesearch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 TrackComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 Wrappingupmusicsearch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 RouterHooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 AuthService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254 LoginComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256 ProtectedComponentandRouteGuards . . . . . . . . . . . . . . . . . . . . . . . . . . 257 NestedRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 ConfiguringRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 ProductsModule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 DataArchitectureinAngular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271 AnOverviewofDataArchitecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271 DataArchitectureinAngular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 DataArchitecturewithObservables-Part1:Services . . . . . . . . . . . . . . . . . . . . 273 ObservablesandRxJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 Note:SomeRxJSKnowledgeRequired . . . . . . . . . . . . . . . . . . . . . . . . . . 273 LearningReactiveProgrammingandRxJS . . . . . . . . . . . . . . . . . . . . . . . . 273 ChatAppOverview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276 Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277 Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 ImplementingtheModels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279 User . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279 Thread . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279 Message . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280 ImplementingUsersService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281 currentUserstream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282 Settinganewuser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 UsersService.ts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284 TheMessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 thenewMessagesstream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 CONTENTS themessagesstream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 TheOperationStreamPattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 SharingtheStream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 AddingMessagestothemessagesStream . . . . . . . . . . . . . . . . . . . . . . . . . 290 OurcompletedMessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293 TryingoutMessagesService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296 TheThreadsService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298 Amapofthecurrentsetof Threads(inthreads) . . . . . . . . . . . . . . . . . . . . . 298 Achronologicallistof Threads,newest-first(inorderedthreads) . . . . . . . . . . . . 303 ThecurrentlyselectedThread(incurrentThread) . . . . . . . . . . . . . . . . . . . . 303 Thelistof MessagesforthecurrentlyselectedThread(incurrentThreadMessages) . . 305 OurCompletedThreadsService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308 DataModelSummary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 DataArchitecturewithObservables-Part2:ViewComponents . . . . . . . . . . . . . . 311 BuildingOurViews:TheAppComponentTop-LevelComponent . . . . . . . . . . . . . . . 311 TheChatThreadsComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314 ChatThreadsComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315 TheSingleChatThreadComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315 ChatThreadComponentControllerandngOnInit . . . . . . . . . . . . . . . . . . . . . 317 ChatThreadComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317 TheChatWindowComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318 TheChatMessageComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328 TheChatMessageComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . 330 TheChatNavBarComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331 TheChatNavBarComponent@Component . . . . . . . . . . . . . . . . . . . . . . . . . . 331 TheChatNavBarComponenttemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . 333 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334 IntroductiontoReduxwithTypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336 Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 Redux:KeyIdeas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 CoreReduxIdeas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338 What’sareducer? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338 DefiningActionandReducerInterfaces . . . . . . . . . . . . . . . . . . . . . . . . . 339 CreatingOurFirstReducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339 RunningOurFirstReducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340 AdjustingtheCounterWithactions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341 Reducerswitch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342 Action“Arguments” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344 StoringOurState . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345 UsingtheStore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346 BeingNotifiedwithsubscribe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346