Creating an interface

This tutorial lesson demonstrates how to create an interface and include it in a component of your app.

What you'll learn

• 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

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.

In this lesson, you'll create an interface to define properties that represent data about a single housing location.

1. Create a new Angular interface

   This step creates a new interface in your app.

   In the Terminal pane of your IDE:

   1. In your project directory, navigate to the first-app directory.

   2. In the first-app directory, run this command to create the new interface.

            
      ng generate interface housinglocation
          

   3. Run ng serve to build the app and serve it to http://localhost:4200.

   4. In a browser, open http://localhost:4200 to see your app.

   5. Confirm that the app builds without error. Correct any errors before you continue to the next 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.

   2. In the Edit pane of your IDE, open the src/app/housinglocation.ts file.

   3. In housinglocation.ts, replace the default content with the following code to make your new interface to match this example.

      Update src/app/housinglocation.ts to match this code

            
      export interface HousingLocation {  id: number;  name: string;  city: string;  state: string;  photo: string;  availableUnits: number;  wifi: boolean;  laundry: boolean;}
          

   4. Save your changes and confirm the app does not display any errors. Correct any errors before you continue to the next step.

   At this point, you've defined an interface that represents data about a housing location including an id, name, and location information.

3. Create a test house for your app

   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.

   2. In the Edit pane of your IDE, open src/app/home/home.component.ts.

   3. In src/app/home/home.component.ts, add this import statement after the existing import statements so that HomeComponent can use the new interface.

      Import HomeComponent in src/app/home/home.component.ts

            
      import {Component} from '@angular/core';import {CommonModule} from '@angular/common';import {HousingLocationComponent} from '../housing-location/housing-location.component';import {HousingLocation} from '../housinglocation';@Component({  selector: 'app-home',  imports: [CommonModule, HousingLocationComponent],  template: `    <section>      <form>        <input type="text" placeholder="Filter by city" />        <button class="primary" type="button">Search</button>      </form>    </section>    <section class="results">      <app-housing-location></app-housing-location>    </section>  `,  styleUrls: ['./home.component.css'],})export class HomeComponent {  readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common';  housingLocation: HousingLocation = {    id: 9999,    name: 'Test Home',    city: 'Test city',    state: 'ST',    photo: `${this.baseUrl}/example-house.jpg`,    availableUnits: 99,    wifi: true,    laundry: false,  };}
          

   4. 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.

      Add sample data to src/app/home/home.component.ts

            
      import {Component} from '@angular/core';import {CommonModule} from '@angular/common';import {HousingLocationComponent} from '../housing-location/housing-location.component';import {HousingLocation} from '../housinglocation';@Component({  selector: 'app-home',  imports: [CommonModule, HousingLocationComponent],  template: `    <section>      <form>        <input type="text" placeholder="Filter by city" />        <button class="primary" type="button">Search</button>      </form>    </section>    <section class="results">      <app-housing-location></app-housing-location>    </section>  `,  styleUrls: ['./home.component.css'],})export class HomeComponent {  readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common';  housingLocation: HousingLocation = {    id: 9999,    name: 'Test Home',    city: 'Test city',    state: 'ST',    photo: `${this.baseUrl}/example-house.jpg`,    availableUnits: 99,    wifi: true,    laundry: false,  };}
          

   5. Confirm that your home.component.ts file matches like this example.

      src/app/home/home.component.ts

            
      import {Component} from '@angular/core';import {CommonModule} from '@angular/common';import {HousingLocationComponent} from '../housing-location/housing-location.component';import {HousingLocation} from '../housinglocation';@Component({  selector: 'app-home',  imports: [CommonModule, HousingLocationComponent],  template: `    <section>      <form>        <input type="text" placeholder="Filter by city" />        <button class="primary" type="button">Search</button>      </form>    </section>    <section class="results">      <app-housing-location></app-housing-location>    </section>  `,  styleUrls: ['./home.component.css'],})export class HomeComponent {  readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common';  housingLocation: HousingLocation = {    id: 9999,    name: 'Test Home',    city: 'Test city',    state: 'ST',    photo: `${this.baseUrl}/example-house.jpg`,    availableUnits: 99,    wifi: true,    laundry: false,  };}
          

      By adding the housingLocation property of type HousingLocation to the HomeComponent class, we're able to confirm that the data matches the description of the interface. If the data didn't satisfy the description of the interface, the IDE has enough information to give us helpful errors.

   6. Save your changes and confirm the app does not have any errors. Open the browser and confirm that your application still displays the message "housing-location works!"

      

   7. Correct any errors before you continue to the next step.

For more information about the topics covered in this lesson, visit: