This tutorial lesson demonstrates how to create an interface and include it in a component of your app.
Time required: expect to spend about 10 minutes to complete this lesson.
This lesson starts with the code from the previous lesson, so you can:
If you haven't reviewed the introduction, visit the Introduction to Angular tutorial 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 for this lesson.
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.
Perform these steps on the app code in your IDE.
This step creates a new interface in your app.
In the Terminal pane of your IDE:
In your project directory, navigate to the first-app
directory.
In the first-app
directory, run this command to create the new interface.
ng generate interface housinglocation
Run ng serve
to build the app and serve it to http://localhost:4200
.
In a browser, open http://localhost:4200
to see your app.
Confirm that the app builds without error. Correct any errors before you continue to the next step.
This step adds the properties to the interface that your app needs to represent a housing location.
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
.
In the Edit pane of your IDE, open the src/app/housinglocation.ts
file.
In housinglocation.ts
, replace the default content with the following code to make your new interface to match this example.
export interface HousingLocation { id: number; name: string; city: string; state: string; photo: string; availableUnits: number; wifi: boolean; laundry: boolean; }
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.
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.
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
.
In the Edit pane of your IDE, open src/app/home/home.component.ts
.
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 { HousingLocation } from '../housinglocation';
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.
export class HomeComponent { housingLocation: HousingLocation = { id: 9999, name: 'Test Home', city: 'Test city', state: 'ST', photo: 'assets/example-house.jpg', availableUnits: 99, wifi: true, laundry: false, }; }
Confirm that your home.component.ts
file matches like this example.
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', standalone: true, 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 { housingLocation: HousingLocation = { id: 9999, name: 'Test Home', city: 'Test city', state: 'ST', photo: 'assets/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 if the IDE has enough information to give us helpful errors.
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!"
Correct any errors before you continue to the next step.
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.
For more information about the topics covered in this lesson, visit:
© 2010–2023 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/tutorial/first-app/first-app-lesson-04