How to Create an Angular Interface

Step 1: Create a New Angular Interface
To start, you’ll need to create an interface that defines properties for your housing location data.

• Open the Terminal in your IDE.
• Navigate to your project directory, then go to the first-app directory.
• Run the following command to generate a new interface

ng generate interface housinglocation

Start your application by running:

ng serve

• This will build your app and make it available at http://localhost:4200.

Open http://localhost:4200 in your browser to verify that your app is running without errors. Fix any issues before moving forward.

Step 2: Define Properties for the Interface
Now, let’s add the necessary properties to the interface to represent the housing location.

• Make sure your app is still running via ng serve.
• In your IDE, open the file src/app/housinglocation.ts.
• Replace the existing content in housinglocation.ts with the following code

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

Save the file and check that the app shows no errors. Make corrections if needed before moving to the next step.

Step 3: Add Sample Data to Your App
With the interface created, the next step is to add sample data using this interface.

• Keep your app running using ng serve.
• In your IDE, open the file src/app/home/home.component.ts.
• Add the following import statement to bring in the new HousingLocation interface

import { HousingLocation } from '../housinglocation';

Update the HomeComponent class with the following code to include an instance of the HousingLocation interface:

export class HomeComponent {
  readonly baseUrl = 'https://angular.io/assets/images/tutorials/faa';

  housingLocation: HousingLocation = {
    id: 9999,
    name: 'Test Home',
    city: 'Test city',
    state: 'ST',
    photo: `${this.baseUrl}/example-house.jpg`,
    availableUnits: 99,
    wifi: true,
    laundry: false,
  };
}

This code sets up a sample housing location with some test data. Make sure that your file looks like the above example, and then save your changes.

In this lesson, you successfully created a new interface in Angular to represent housing location data. You added properties like id, name, and city to define key attributes. Finally, you used the interface to add a test housing location to your app.

By completing these steps, you’ve structured your app’s data model, ensuring that TypeScript and your IDE can assist you in catching errors as you build your app further.

Keep Learning 🙂