diff --git a/aio/content/examples/getting-started/src/app/app.module.ts b/aio/content/examples/getting-started/src/app/app.module.ts
index cbbecc5b5e..fd49de191f 100644
--- a/aio/content/examples/getting-started/src/app/app.module.ts
+++ b/aio/content/examples/getting-started/src/app/app.module.ts
@@ -43,8 +43,8 @@ import { ShippingComponent } from './shipping/shipping.component';
     ProductListComponent,
     ProductAlertsComponent,
     ProductDetailsComponent,
-// #enddocregion http-client-module
     CartComponent,
+// #enddocregion http-client-module
     ShippingComponent
 // #docregion http-client-module
   ],
diff --git a/aio/content/examples/getting-started/src/app/cart.service.ts b/aio/content/examples/getting-started/src/app/cart.service.ts
index af7a3dc930..b28b22f351 100644
--- a/aio/content/examples/getting-started/src/app/cart.service.ts
+++ b/aio/content/examples/getting-started/src/app/cart.service.ts
@@ -35,5 +35,5 @@ export class CartService {
   getShippingPrices() {
     return this.http.get('/assets/shipping.json');
   }
-// #docregion props, methods, import-inject
+// #docregion props, methods, inject-http
 }
diff --git a/aio/content/examples/getting-started/src/app/cart/cart.component.3.html b/aio/content/examples/getting-started/src/app/cart/cart.component.3.html
new file mode 100644
index 0000000000..11f860d66d
--- /dev/null
+++ b/aio/content/examples/getting-started/src/app/cart/cart.component.3.html
@@ -0,0 +1,19 @@
+<!-- #docplaster -->
+<h3>Cart</h3>
+
+<p>
+  <a routerLink="/shipping">Shipping Prices</a>
+</p>
+
+<div class="cart-item" *ngFor="let item of items">
+  <span>{{ item.name }} </span>
+  <span>{{ item.price | currency }}</span>
+</div>
+
+<!-- #docregion checkout-form-->
+<form [formGroup]="checkoutForm">
+
+  <button class="button" type="submit">Purchase</button>
+
+</form>
+<!-- #enddocregion checkout-form -->
diff --git a/aio/content/examples/getting-started/src/app/cart/cart.component.3.ts b/aio/content/examples/getting-started/src/app/cart/cart.component.3.ts
index e7cb5addac..9f7847ab0a 100644
--- a/aio/content/examples/getting-started/src/app/cart/cart.component.3.ts
+++ b/aio/content/examples/getting-started/src/app/cart/cart.component.3.ts
@@ -13,7 +13,7 @@ import { CartService } from '../cart.service';
 export class CartComponent {
   items;
 
-constructor(
+  constructor(
     private cartService: CartService
   ) {
     this.items = this.cartService.getItems();
diff --git a/aio/content/examples/getting-started/src/app/cart/cart.component.html b/aio/content/examples/getting-started/src/app/cart/cart.component.html
index b3315d7391..060e9d8823 100644
--- a/aio/content/examples/getting-started/src/app/cart/cart.component.html
+++ b/aio/content/examples/getting-started/src/app/cart/cart.component.html
@@ -1,5 +1,5 @@
 <!-- #docplaster -->
-<!-- #docregion checkout-form-1, checkout-form-2 -->
+<!-- #docregion checkout-form-2 -->
 <h3>Cart</h3>
 
 <p>
@@ -11,8 +11,10 @@
   <span>{{ item.price | currency }}</span>
 </div>
 
+<!-- #docregion checkout-form-1 -->
 <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)">
-<!-- #enddocregion checkout-form-1 -->  
+<!-- #enddocregion checkout-form-1 -->
+
   <div>
     <label>Name</label>
     <input type="text" formControlName="name">
@@ -24,5 +26,6 @@
   </div>
 
   <button class="button" type="submit">Purchase</button>
-<!-- #docregion checkout-form-1 -->  
+  
+<!-- #docregion checkout-form-1 -->
 </form>
diff --git a/aio/content/examples/getting-started/src/app/cart/cart.component.ts b/aio/content/examples/getting-started/src/app/cart/cart.component.ts
index 30b9a9d142..cf7f31a4f4 100644
--- a/aio/content/examples/getting-started/src/app/cart/cart.component.ts
+++ b/aio/content/examples/getting-started/src/app/cart/cart.component.ts
@@ -11,22 +11,28 @@ import { CartService } from '../cart.service';
   templateUrl: './cart.component.html',
   styleUrls: ['./cart.component.css']
 })
-// #docregion props-services, submit
+// #docregion props-services, submit, inject-form-builder, checkout-form, checkout-form-group
 export class CartComponent {
   items;
+// #enddocregion inject-form-builder
   checkoutForm;
+// #enddocregion checkout-form
+// #docregion inject-form-builder
 
   constructor(
     private cartService: CartService,
     private formBuilder: FormBuilder,
-    ) {
-      this.items = this.cartService.getItems();
+  ) {
+// #enddocregion inject-form-builder
+    this.items = this.cartService.getItems();
 
-      this.checkoutForm = this.formBuilder.group({
-        name: '',
-        address: ''
-      });
+    this.checkoutForm = this.formBuilder.group({
+      name: '',
+      address: ''
+    });
+// #docregion inject-form-builder
   }
+// #enddocregion inject-form-builder, checkout-form-group
 
   // #enddocregion props-services
   onSubmit(customerData) {
@@ -36,5 +42,5 @@ export class CartComponent {
     this.items = this.cartService.clearCart();
     this.checkoutForm.reset();
   }
-  // #docregion props-services
+// #docregion props-services, inject-form-builder, checkout-form, checkout-form-group
 }
diff --git a/aio/content/examples/getting-started/src/app/shipping/shipping.component.1.ts b/aio/content/examples/getting-started/src/app/shipping/shipping.component.1.ts
index 04f1772ab9..3bbacae6bd 100644
--- a/aio/content/examples/getting-started/src/app/shipping/shipping.component.1.ts
+++ b/aio/content/examples/getting-started/src/app/shipping/shipping.component.1.ts
@@ -5,7 +5,7 @@ import { Component, OnInit } from '@angular/core';
   templateUrl: './shipping.component.html',
   styleUrls: ['./shipping.component.css']
 })
-export class Shipping1Component implements OnInit {
+export class ShippingComponent implements OnInit {
 
   constructor() { }
 
diff --git a/aio/content/examples/getting-started/src/app/shipping/shipping.component.ts b/aio/content/examples/getting-started/src/app/shipping/shipping.component.ts
index a5119c8319..4a86d5c664 100644
--- a/aio/content/examples/getting-started/src/app/shipping/shipping.component.ts
+++ b/aio/content/examples/getting-started/src/app/shipping/shipping.component.ts
@@ -15,8 +15,12 @@ export class ShippingComponent {
   shippingCosts;
 // #enddocregion props
 
+// #docregion inject-cart-service
   constructor(private cartService: CartService) {
+// #enddocregion inject-cart-service
     this.shippingCosts = this.cartService.getShippingPrices();
+// #docregion inject-cart-service
   }
+// #enddocregion inject-cart-service
 // #docregion props
 }
diff --git a/aio/content/getting-started/data.md b/aio/content/getting-started/data.md
index 13c773fff1..5d2967ee09 100644
--- a/aio/content/getting-started/data.md
+++ b/aio/content/getting-started/data.md
@@ -46,7 +46,7 @@ Later, in the [Forms](getting-started/forms "Getting Started: Forms") part of th
 
 1. Define methods to add items to the cart, return cart items, and clear the cart items: 
 
-    <code-example path="getting-started/src/app/cart.service.ts" region="methods"></code-example>
+    <code-example path="getting-started/src/app/cart.service.ts" region="methods" linenums="false"></code-example>
 
     <!--
     To check: StackBlitz includes the constructor. If it's important (and not obvious) that the methods be below the constructor, then we should show it or say something. 
@@ -341,15 +341,7 @@ Now that your app can retrieve shipping data, you'll create a shipping component
 
     1. Inject the cart service into the `ShippingComponent` class: 
 
-        ```
-        constructor(
-            private cartService: CartService
-        ) { }
-        ```
-
-        <!--
-        To do: Create docregion
-        -->
+        <code-example path="getting-started/src/app/shipping/shipping.component.ts" region="inject-cart-service"></code-example>
 
     1. Set the `shippingCosts` property using the `getShippingPrices()` method from cart service.
 
diff --git a/aio/content/getting-started/forms.md b/aio/content/getting-started/forms.md
index 76f6e2652a..922a2f15f3 100644
--- a/aio/content/getting-started/forms.md
+++ b/aio/content/getting-started/forms.md
@@ -25,62 +25,18 @@ First, you'll set up the checkout form model. The form model is the source of tr
 
     1. Inject the `FormBuilder` service. 
 
-        ```
-        export class CartComponent {
-          items;
-
-          constructor(
-            private cartService: CartService,
-            private formBuilder: FormBuilder,
-          ) { }
-        }
-        ```
-
-        <!-- 
-        To do: Replace with docregion  
-        -->
+      <code-example header="src/app/cart/cart.component.ts" path="getting-started/src/app/cart/cart.component.ts" region="inject-form-builder">
+      </code-example>
 
 1. In the `CartComponent` class, define the `checkoutForm` property to store the form model.
 
-    ```
-    export class CartComponent {
-      items;
-      checkoutForm;
-    }
-    ```
-    <!-- 
-      To do: Replace with docregion  
-    -->
+    <code-example header="src/app/cart/cart.component.ts" path="getting-started/src/app/cart/cart.component.ts" region="checkout-form">
+    </code-example>
 
 1. During checkout, the app will prompt the user for a name and address. So that you can gather that information later, set the `checkoutForm` property with a form model containing `name` and `address` fields, using the `FormBuilder#group()` method.
 
-    ```
-    export class CartComponent {
-      items;
-      checkoutForm;
-
-      constructor(
-        private formBuilder: FormBuilder,
-        private cartService: CartService
-      ) {
-        this.items = this.cartService.getItems();
-
-        this.checkoutForm = this.formBuilder.group({
-          name: '',
-          address: ''
-        });
-      }
-    ```
-    <!-- 
-      To do: Replace with docregion  
-    --->
-
-    <!-- 
-    The resulting `CartComponent` class should look like this: 
-
-    <code-example header="src/app/cart/cart.component.ts" path="getting-started/src/app/cart/cart.component.ts" region="props-services">
+    <code-example header="src/app/cart/cart.component.ts" path="getting-started/src/app/cart/cart.component.ts" region="checkout-form-group" linenums="false">
     </code-example>
-    -->
 
 1. For the checkout process, users need to be able to submit the form data (their name and address). When the order is submitted, the form should reset and the cart should clear. 
 
@@ -88,8 +44,8 @@ First, you'll set up the checkout form model. The form model is the source of tr
 
     The entire cart component is shown below: 
 
-      <code-example header="src/app/cart/cart.component.ts" path="getting-started/src/app/cart/cart.component.ts">
-      </code-example>
+    <code-example header="src/app/cart/cart.component.ts" path="getting-started/src/app/cart/cart.component.ts">
+    </code-example>
 
 The form model is defined in the component class. To reflect the model in the view, you'll need a checkout form.
 
@@ -103,49 +59,18 @@ Next, you'll add a checkout form at the bottom of the "Cart" page.
 
 1. Use a `formGroup` property binding to bind the `checkoutForm` to the `form` tag in the template. Also include a "Purchase" button to submit the form. 
 
-  ```
-  <form [formGroup]="checkoutForm">
-
-    <button class="button" type="submit">Purchase</button>  
-
-  </form>
-  ```
-  
-    <!-- 
-      Note: The preview might contain an error message, which will be resolved by the following steps. 
-      To do: Replace with docregion
-      If you define the name and address fields here, it generates and error in the preview. 
-      I had to add the formGroup property before the message would resolve. 
-    -->
-
-<!--
-1. Use a `formGroup` property binding to bind the `checkoutForm` to the `form` tag in the template.
-
-    ```    
-    <form [formGroup]="checkoutForm">
-    ...
-    </form>
-    ```
-
-    To do: Replace with docregion
--->
+  <code-example header="src/app/cart/cart.component.html" path="getting-started/src/app/cart/cart.component.3.html" region="checkout-form">
+  </code-example>
 
 1. On the `form` tag, use an `ngSubmit` event binding to listen for the form submission and call the `onSubmit()` method with the `checkoutForm` value.
 
-    ```    
-    <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)">
-    ...
-    </form>
-    ```
-
-    <!-- 
-      To do: Replace with docregion
-    -->
+  <code-example path="getting-started/src/app/cart/cart.component.html" region="checkout-form-1">
+  </code-example>
 
 1. Add input fields for `name` and `address`.  Use the `formControlName` attribute binding to bind the `checkoutForm` form controls for `name` and `address` to their input fields. The final complete component is shown below: 
 
-    <code-example header="src/app/cart/cart.component.html" path="getting-started/src/app/cart/cart.component.html" region="checkout-form-2">
-    </code-example>
+  <code-example path="getting-started/src/app/cart/cart.component.html" region="checkout-form-2">
+  </code-example>
 
 After putting a few items in the cart, users can now review their items, enter name and address, and submit their purchase: 
 
diff --git a/aio/content/getting-started/routing.md b/aio/content/getting-started/routing.md
index 239f787d84..452fbca4e9 100644
--- a/aio/content/getting-started/routing.md
+++ b/aio/content/getting-started/routing.md
@@ -70,12 +70,12 @@ The product details component handles the display of each product. The Angular R
 
     1. Import `ActivatedRoute` from the `@angular/router` package, and the `products` array from `../products`.
 
-        <code-example header="src/app/product-details/product-details.component.1.ts" path="getting-started/src/app/product-details/product-details.component.1.ts" region="imports">
+        <code-example header="src/app/product-details/product-details.component.ts" path="getting-started/src/app/product-details/product-details.component.1.ts" region="imports">
         </code-example>
 
     1. Define the `product` property and inject the `ActivatedRoute` into the constructor.
 
-        <code-example path="getting-started/src/app/product-details/product-details.component.1.ts" region="props-methods">
+        <code-example header="src/app/product-details/product-details.component.ts" path="getting-started/src/app/product-details/product-details.component.1.ts" region="props-methods">
         </code-example>
 
         The `ActivatedRoute` is specific to each routed component loaded by the Angular Router. It contains information about the