Angular training upgrade angular 17

src/angular/1-why-angular/why-angular.md

@@ -7,28 +7,31 @@
 
 ## Angular in the Modern Web Development Ecosphere
 
-Angular was first released in 2010 as a new framework in the MV* space alongside libraries like Backbone, Knockout, and Dojo.
+Angular was first released in 2010 as a new framework in the MV\* space alongside libraries like Backbone, Knockout, and Dojo.
 Some of the best things about Angular are that it is opinionated, has built-in testing, streamlines the Webpack build complexity with its own CLI, and is a Google-backed and supported product.
+
 ## The Pros
 
 ### 1. An Opinionated Framework
 
-Developers have to make a lot of decisions on a daily basis, which can often create decision fatigue. The great part about using an opinionated framework is being able to shift your focus from build configs, high level architecture decisions,   to writing the actual client-specific functioning pieces of the application.
+Developers have to make a lot of decisions on a daily basis, which can often create decision fatigue. The great part about using an opinionated framework is being able to shift your focus from build configs, high level architecture decisions, to writing the actual client-specific functioning pieces of the application.
 
 The use of TypeScript to force type checking improves workflow by catching errors at compile time allowing teams to catch potential errors much faster.
 
 ### 2. Testing Built In
 
-Spinning up a new Angular Workspace automatically creates a test suite, with a working karma config, and new test spec files for any component generated.  
+Spinning up a new Angular Workspace automatically creates a test suite, with a working karma config, and new test spec files for any component generated.
+
+### 3. Harnesses the Power of Modern Bundlers
 
-### 3. Harnesses the Power of Webpack
+Angular streamlines the build process by masking bundler complexity with the Angular CLI.
 
-Webpack is a module bundler that also handles transforming resources, like Less or Typescript.
-Angular streamlines the build process by masking Webpack config complexity with the Angular CLI.
+Up until Angular 16, Angular's build process used Webpack. Webpack is a module bundler that also handles transforming resources like Less or Typescript.
+
+Starting on Angular 17, to keep up with latest technology and for its improved build times, Angular switched to esbuild by default.
 
 ### 4. Google-Backed and Supported Product
 
 Having a heavy hitting tech titan backing a library can make it a very sustainable choice to use.
 
-
-For more information see the <a href="https://docs.angularjs.org/guide/introduction" >Angular Docs</a>
+For more information see the <a href="https://angular.io" >Angular Docs</a>

src/angular/10-updating-service-params/restaurant.component-httpparams.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { Subject, takeUntil } from 'rxjs';
 import { Restaurant } from './restaurant';
 import {
@@ -20,7 +20,10 @@ export interface Data<T> {
   styleUrls: ['./restaurant.component.less'],
 })
 export class RestaurantComponent implements OnInit, OnDestroy {
-  form: FormGroup = this.createForm();
+  form: FormGroup<{
+    state: FormControl<string>;
+    city: FormControl<string>;
+  }> = this.createForm();
 
   restaurants: Data<Restaurant> = {
     value: [],
@@ -54,48 +57,49 @@ export class RestaurantComponent implements OnInit, OnDestroy {
     this.onDestroy$.complete();
   }
 
-  createForm(): FormGroup {
-    return this.fb.group({
+  createForm(): FormGroup<{
+    state: FormControl<string>;
+    city: FormControl<string>;
+  }> {
+    return this.fb.nonNullable.group({
       state: { value: '', disabled: true },
       city: { value: '', disabled: true },
     });
   }
 
   onChanges(): void {
-    let state: string = this.form.get('state')?.value;
+    let state: string = this.form.controls.state.value;
 
-    this.form
-      .get('state')
-      ?.valueChanges.pipe(takeUntil(this.onDestroy$))
+    this.form.controls.state.valueChanges
+      .pipe(takeUntil(this.onDestroy$))
       .subscribe((val) => {
         this.restaurants.value = [];
         if (val) {
           // only enable city if state has value
-          this.form.get('city')?.enable({
+          this.form.controls.city.enable({
             onlySelf: true,
             emitEvent: false,
           });
 
           // if state has a value and has changed, clear previous city value
           if (state !== val) {
-            this.form.get('city')?.patchValue('');
+            this.form.controls.city.setValue('');
           }
 
           // fetch cities based on state val
           this.getCities(val);
         } else {
           // disable city if no value
-          this.form.get('city')?.disable({
+          this.form.controls.city.disable({
             onlySelf: true,
             emitEvent: false,
           });
         }
         state = val;
       });
 
-    this.form
-      .get('city')
-      ?.valueChanges.pipe(takeUntil(this.onDestroy$))
+    this.form.controls.city.valueChanges
+      .pipe(takeUntil(this.onDestroy$))
       .subscribe((val) => {
         if (val) {
           this.getRestaurants(state, val);
@@ -104,13 +108,14 @@ export class RestaurantComponent implements OnInit, OnDestroy {
   }
 
   getStates(): void {
+    this.states.isPending = true;
     this.restaurantService
       .getStates()
       .pipe(takeUntil(this.onDestroy$))
       .subscribe((res: ResponseData<State>) => {
         this.states.value = res.data;
         this.states.isPending = false;
-        this.form.get('state')?.enable();
+        this.form.controls.state.enable();
       });
   }
 
@@ -122,14 +127,15 @@ export class RestaurantComponent implements OnInit, OnDestroy {
       .subscribe((res: ResponseData<City>) => {
         this.cities.value = res.data;
         this.cities.isPending = false;
-        this.form.get('city')?.enable({
+        this.form.controls.city.enable({
           onlySelf: true,
           emitEvent: false,
         });
       });
   }
 
   getRestaurants(state: string, city: string): void {
+    this.restaurants.isPending = true;
     this.restaurantService
       .getRestaurants(state, city)
       .pipe(takeUntil(this.onDestroy$))

src/angular/10-updating-service-params/updating-service-params.md

@@ -24,7 +24,7 @@ Now that we are able to capture a user's state and city preferences, we want to
 
 ## Technical Requirements
 
-In the **src/app/restaurant/restaurant.component.ts** file, update the call to the `getRestaurants` service method to use the city and state values capture from the user's form input.
+In the **src/app/restaurant/restaurant.component.ts** file, update the call to the `getRestaurants` service method to use the city and state values captured from the user's form input.
 
 ## How to Verify Your Solution is Correct
 

src/angular/11-declarative-state/declarative-state.md

@@ -226,7 +226,7 @@ You'll also add new single-responsibility streams:
 ✏️ Update __src/app/restaurant/restaurant.component.ts__
 
 @sourceref ./restaurant.component.ts
-@highlight 3-15, 29-34, 44-51, 59-137, 141-143
+@highlight 3-15, 29-34, 47-54, 62-140, 144-146
 
 ✏️ Update **src/app/restaurant/restaurant.component.html**
 

src/angular/11-declarative-state/restaurant.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import {
   combineLatest,
   map,
@@ -39,7 +39,10 @@ const toData = map(
   styleUrls: ['./restaurant.component.less'],
 })
 export class RestaurantComponent implements OnInit, OnDestroy {
-  form: FormGroup = this.createForm();
+  form: FormGroup<{
+    state: FormControl<string>;
+    city: FormControl<string>;
+  }> = this.createForm();
 
   states$: Observable<Data<State>>;
   cities$: Observable<Data<City>>;
@@ -56,13 +59,13 @@ export class RestaurantComponent implements OnInit, OnDestroy {
     private restaurantService: RestaurantService,
     private fb: FormBuilder
   ) {
-    this.selectedState$ = this.form
-      .get('state')!
-      .valueChanges.pipe(startWith(''));
+    this.selectedState$ = this.form.controls.state.valueChanges.pipe(
+      startWith('')
+    );
 
-    this.selectedCity$ = this.form
-      .get('city')!
-      .valueChanges.pipe(startWith(''));
+    this.selectedCity$ = this.form.controls.city.valueChanges.pipe(
+      startWith('')
+    );
 
     this.states$ = this.restaurantService
       .getStates()
@@ -76,7 +79,7 @@ export class RestaurantComponent implements OnInit, OnDestroy {
       takeUntil(this.onDestroy$),
       tap((states) => {
         if (states.value.length > 0) {
-          this.form.get('state')!.enable();
+          this.form.controls.state.enable();
         }
       })
     );
@@ -98,12 +101,12 @@ export class RestaurantComponent implements OnInit, OnDestroy {
       takeUntil(this.onDestroy$),
       tap((cities) => {
         if (cities.value.length === 0) {
-          this.form.get('city')!.disable({
+          this.form.controls.city.disable({
             onlySelf: true,
             emitEvent: false,
           });
         } else {
-          this.form.get('city')!.enable({
+          this.form.controls.city.enable({
             onlySelf: true,
             emitEvent: false,
           });
@@ -116,7 +119,7 @@ export class RestaurantComponent implements OnInit, OnDestroy {
       pairwise(),
       tap(([previous, current]) => {
         if (current && current !== previous) {
-          this.form.get('city')!.patchValue('');
+          this.form.controls.city.setValue('');
         }
       })
     );
@@ -148,8 +151,11 @@ export class RestaurantComponent implements OnInit, OnDestroy {
     this.onDestroy$.complete();
   }
 
-  createForm(): FormGroup {
-    return this.fb.group({
+  createForm(): FormGroup<{
+    state: FormControl<string>;
+    city: FormControl<string>;
+  }> {
+    return this.fb.nonNullable.group({
       state: { value: '', disabled: true },
       city: { value: '', disabled: true },
     });

src/angular/12-writing-unit-tests/order-state/app.component.spec.ts

@@ -94,7 +94,7 @@ describe('AppComponent', () => {
       fixture.detectChanges();
       tick();
       fixture.detectChanges();
-      let homeLinkLi = fixture.debugElement.query(By.css('li'));
+      const homeLinkLi = fixture.debugElement.query(By.css('li'));
       expect(homeLinkLi.nativeElement.classList).toContain('active');
       expect(compiled.querySelectorAll('.active').length).toBe(1);
       fixture.destroy();
@@ -109,7 +109,7 @@ describe('AppComponent', () => {
       fixture.detectChanges();
       tick();
       fixture.detectChanges();
-      let restaurantsLinkLi = fixture.debugElement.query(By.css('li:nth-child(2)'));
+      const restaurantsLinkLi = fixture.debugElement.query(By.css('li:nth-child(2)'));
       expect(restaurantsLinkLi.nativeElement.classList).toContain('active');
       expect(compiled.querySelectorAll('.active').length).toBe(1);
       fixture.destroy();

src/angular/12-writing-unit-tests/writing-unit-tests.md

@@ -26,7 +26,7 @@ In the next section we're going to be creating a restaurant detail view. We'll n
 
   });
   ```
-- Refer to the existing tests on the service to see how to use `HttpMock` to test `HttpClient` calls.
+- Refer to the existing tests on the service to see how to use `httpMock` (`HttpTestingController`) to test `HttpClient` calls.
 
 ## Solution
 

src/angular/13-nested-routes/app.component.spec.ts

@@ -239,6 +239,7 @@ describe('AppComponent', () => {
   });
 
   it('should render the HomeComponent with router navigates to "/" path', fakeAsync(() => {
+    fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
     router.navigate(['']).then(() => {
       expect(location.path()).toBe('');
@@ -247,6 +248,7 @@ describe('AppComponent', () => {
   }));
 
   it('should render the RestaurantsComponent with router navigates to "/restaurants" path', fakeAsync(() => {
+    fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
     router.navigate(['restaurants']).then(() => {
       expect(location.path()).toBe('/restaurants');
@@ -255,6 +257,7 @@ describe('AppComponent', () => {
   }));
 
   it('should render the DetailComponent with router navigates to "/restaurants/slug" path', fakeAsync(() => {
+    fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
     router.navigate(['restaurants/crab-shack']).then(() => {
       expect(location.path()).toBe('/restaurants/crab-shack');

src/angular/13-nested-routes/detail.component.spec.ts

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActivatedRoute } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { of } from 'rxjs';
-import { ImageUrlPipe } from 'src/app/image-url.pipe';
+import { ImageUrlPipe } from '../../image-url.pipe';
 import { RestaurantService } from '../restaurant.service';
 import { DetailComponent } from './detail.component';
 

src/angular/13-nested-routes/nested-routes.md

@@ -28,7 +28,7 @@ To solve this exercise you will need to know:
 
 ## Route Parameters & Child Views
 
-A common pattern in SPA architecture is to serve a view of an individual piece of data from a path with an identifying parameter. Previously we've defined static paths with Angulars <a href="https://angular.io/guide/router" >router</a>. To create a nested route, we'll need the slug after the slash to be dynamic. We can set a token for the router parameter with `:`. To get the slug from the route in a component, we use the <a href="https://angular.io/api/router/ActivatedRoute" >ActivatedRoute</a> interface.
+A common pattern in SPA architecture is to serve a view of an individual piece of data from a path with an identifying parameter. Previously we've defined static paths with Angular's <a href="https://angular.io/guide/router" >router</a>. To create a nested route, we'll need the slug after the slash to be dynamic. We can set a token for the router parameter with `:`. To get the slug from the route in a component, we use the <a href="https://angular.io/api/router/ActivatedRoute" >ActivatedRoute</a> interface.
 
 @sourceref ./nested-route.html
 @codepen
@@ -54,7 +54,7 @@ ng g component restaurant/detail
 
 When you click the detail button on a restaurant from the restaurant list view you'll see the detail view of that restaurant.
 
-✏️ Update the spec file **src/app/restaurant/detail.component.spec.ts** to be:
+✏️ Update the spec file **src/app/restaurant/detail/detail.component.spec.ts** to be:
 
 @sourceref ./detail.component.spec.ts
 

src/angular/14-building-order-form/app.component.spec.ts

@@ -241,6 +241,7 @@ describe('AppComponent', () => {
   });
 
   it('should render the HomeComponent with router navigates to "/" path', fakeAsync(() => {
+    fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
     router.navigate(['']).then(() => {
       expect(location.path()).toBe('');
@@ -249,6 +250,7 @@ describe('AppComponent', () => {
   }));
 
   it('should render the RestaurantsComponent with router navigates to "/restaurants" path', fakeAsync(() => {
+    fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
     router.navigate(['restaurants']).then(() => {
       expect(location.path()).toBe('/restaurants');
@@ -257,6 +259,7 @@ describe('AppComponent', () => {
   }));
 
   it('should render the DetailComponent with router navigates to "/restaurants/slug" path', fakeAsync(() => {
+    fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
     router.navigate(['restaurants/crab-shack']).then(() => {
       expect(location.path()).toBe('/restaurants/crab-shack');
@@ -265,6 +268,7 @@ describe('AppComponent', () => {
   }));
 
   it('should render the OrderComponent with router navigates to "/restaurants/slug/order" path', fakeAsync(() => {
+    fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
     router.navigate(['restaurants/crab-shack/order']).then(() => {
       expect(location.path()).toBe('/restaurants/crab-shack/order');