diff --git a/aio/content/examples/first-app-lesson-04/src/app/home/home.component.ts b/aio/content/examples/first-app-lesson-04/src/app/home/home.component.ts
index 3582fa5316c..374ce8cd2d5 100644
--- a/aio/content/examples/first-app-lesson-04/src/app/home/home.component.ts
+++ b/aio/content/examples/first-app-lesson-04/src/app/home/home.component.ts
@@ -1,7 +1,9 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HousingLocationComponent } from '../housing-location/housing-location.component';
+// #docregion housing-location-import
 import { HousingLocation } from '../housinglocation';
+// #enddocregion
 
 @Component({
   selector: 'app-home',
@@ -24,6 +26,7 @@ import { HousingLocation } from '../housinglocation';
   styleUrls: ['./home.component.css'],
 })
 
+// #docregion only-house
 export class HomeComponent {
   private img_server = 'https://storage.googleapis.com/angular-tutorial-assets/first-app/';
   onlyHouse: HousingLocation;
@@ -40,5 +43,5 @@ export class HomeComponent {
       laundry: false,
     };
   }
-
 }
+// #enddocregion
diff --git a/aio/content/navigation.json b/aio/content/navigation.json
index 3656b362a5a..96cbb59d93f 100644
--- a/aio/content/navigation.json
+++ b/aio/content/navigation.json
@@ -852,6 +852,11 @@
               "url": "tutorial/first-app/first-app-lesson-02",
               "title": "Create home component",
               "tooltip": "Create the app's HomeComponent"
+            },
+            {
+              "url": "tutorial/first-app/first-app-lesson-04",
+              "title": "Angular interfaces",
+              "tooltip": "Add an Angular interface to your app"
             }
           ]
         },
diff --git a/aio/content/tutorial/first-app/first-app-lesson-04.md b/aio/content/tutorial/first-app/first-app-lesson-04.md
new file mode 100644
index 00000000000..f4a3641cbf3
--- /dev/null
+++ b/aio/content/tutorial/first-app/first-app-lesson-04.md
@@ -0,0 +1,124 @@
+# First Angular app lesson 4 - Angular interfaces
+
+<div class="callout is-important">
+
+<header>This topic is a work in progress</header>
+
+This topic is a first draft. It is complete, but it some or all content might change before its final draft.
+
+</div>
+
+This tutorial lesson demonstrates how to create an Angular interface and include it in a component of your app.
+
+**Time required:** expect to spend about 10 minutes to complete this lesson.
+
+## Before you start
+
+This lesson starts with the code from the previous lesson, so you can:
+
+*   Use the code that you created in Lesson 3 in your interactive development environment (IDE).
+*   Start with the code example from the previous lesson. Choose the <live-example name="first-app-lesson-03"></live-example> from Lesson 3 where you can:
+    *   Use the *live example* in StackBlitz, where the StackBlitz interface is your IDE.
+    *   Use the *download example* and open it in your IDE.
+
+If you haven't reviewed the introduction, visit the [Introduction to Angular tutorial](tutorial/first-app) to make sure you have everything you need to complete this lesson.
+
+If you have any trouble during this lesson, you can review the completed code for this lesson, in the <live-example></live-example> for this lesson.
+
+## After you finish
+
+*  Your app has a new interface that it can use as a data type.
+*  Your app has an instance of the new interface with sample data.
+
+## Conceptual preview of interfaces
+
+Angular interfaces are custom data types for your app.
+
+Angular uses TypeScript to take advantage of working in a strongly typed programming environment.
+Strong type checking reduces the likelihood of one element in your app sending incorrectly formatted data to another.
+Such type-mismatch errors are caught by the TypeScript compiler and many such errors can also be caught in your IDE.
+
+This lesson creates an interface for the first Angular app.
+The interface defines properties that represent data about a single house.
+
+## Lesson steps
+
+Perform these steps on the app code in your IDE.
+
+### Step 1 - Create a new Angular interface
+
+This step creates a new, but empty, interface in your app.
+
+In the **Terminal** pane of your IDE:
+
+1.  In your project directory, navigate to the `first-app` directory.
+1.  In the `first-app` directory, run this command to create the new interface.
+
+    <code-example format="shell" language="shell">
+
+    ng generate interface housinglocation
+
+    </code-example>
+
+1.  Run `ng serve` to build the app and serve it to `http://localhost:4200`.
+1.  In a browser, open `http://localhost:4200` to see your app.
+1.  Confirm that the app builds without error.
+    Correct any errors before you continue to the next step.
+
+### Step 2 - Add properties to the new interface
+
+This step adds the properties to the interface that your app needs to represent a housing location.
+
+1.  In the **Terminal** pane of your IDE, start the `ng serve` command, if it isn't already running, to build the app and serve it to `http://localhost:4200`.
+1.  In the **Edit** pane of your IDE, open the `src/app/housinglocation.ts` file.
+1.  In `housinglocation.ts`, replace the default content with the following code to make your new interface to look like this example.
+
+    <code-example header="Update src/app/housinglocation.ts to look like this" path="first-app-lesson-04/src/app/housinglocation.ts"></code-example>
+
+1.  Save your changes and confirm the app does not display any errors. Correct any errors before you continue to the next step.
+
+### Step 3 - Create a test house for your app
+
+At this point, you have an interface, but you aren't using it yet.
+
+In this step, you create an instance of the interface and assign some sample data to it.
+You won't see this sample data appear in your app yet.
+There are a few more lessons to complete before that happens.
+
+1.  In the **Terminal** pane of your IDE, run the `ng serve` command, if it isn't already running, to build the app and serve your app to `http://localhost:4200`.
+1.  In the **Edit** pane of your IDE, open `src/app/home/home.component.ts`.
+1.  In `src/app/home/home.component.ts`, add this import statement after the existing `import` statements so that `HomeComponent` can use the new interface.
+
+    <code-example header="Add to src/app/home/home.component.ts" path="first-app-lesson-04/src/app/home/home.component.ts" region="housing-location-import"></code-example>
+
+1.  In `src/app/home/home.component.ts`, replace the empty `export class HomeComponent {}` definition with this code to create a single instance of the new interface in the component.
+
+    <code-example header="Sample data to add to src/app/home/home.component.ts" path="first-app-lesson-04/src/app/home/home.component.ts" region="only-house"></code-example>
+
+1.  Confirm that your `home.component.ts` file looks like this example.
+
+    <code-example header="src/app/home/home.component.ts" path="first-app-lesson-04/src/app/home/home.component.ts"></code-example>
+
+1.  Save your changes and confirm the app does not have any errors.
+1.  Correct any errors before you continue to the next step.
+
+## Lesson review
+
+In this lesson, you created an interface that created a new data type for your app.
+This new data type makes it possible for you to specify where `HousingLocation` data is required.
+This new data type also makes it possible for your IDE and the TypeScript compiler can ensure that `HousingLocation` data is used where it's required.
+
+If you are having any trouble with this lesson, you can review the completed code for it in the <live-example></live-example>.
+
+## Next steps
+
+*  **(TODO) Link to lesson 5**
+
+## More information
+
+For more information about the topics covered in this lesson, visit:
+
+<!-- vale Angular.Google_WordListSuggestions = NO -->
+
+*  [ng generate interface](cli/generate#interface-command)
+*  [ng generate](cli/generate)