Now is the much anticipated time of the Introduction for the Interface Property In Angular. If you are well versed in the art of backend development; you already know: data must be modeled in order for it to be used properly.

To do so: In Angular: one is to use a class or interface of data. It is similar to a schema except for the front end and this is the main component of Typescript that separates it from Javascript.

To start I will create a new file in myBlog/src/app called post.interface.ts. This file will look like the following.

export interface Post {

title: String;

}

This allows us to enter the app.component.ts file and write the following.

import { Post } from './post.interface';

From there we can declare different variables with different types with the use of the interface. This can be done so in app.component.ts file like so.

blogPosts: Array;

Also an interface can be used in the http.service.ts file to declare what data is being sent or retrieved. First one can import the Interface named Post.

import { Post } from '../post.interface';

Then the interface can be used in the getBlogPosts method like so.

return this.http.get('/api/blogPosts');

The interface helps display the data. To display the data from the backend service: this time: I will be using a regular list. This will take place in the app.component.html file and will feature a data-bind to the post interface and will use the title as the only parameter. The code of this looks like so.

Lastly when viewed in the browser with the dummy data on the server it should look like so.