Creating a model in MEAN Stack

In our previous section, we learned about property and event binding. We get a working chain where we add a new post and output it in the expansion panel. In this section, we will optimize our code.

In our code, we used posts in different places. We ensure that they have the same structure, title, and content, and this is done when we create them. We rely on this structure when outputting them.

In the app.component.ts file, we have an array, and we can store anything here. We could store a number in this array. After some weeks or months, if we come back to our application, we might have a hard time figuring out immediately which kind of data we stored there, either post-content or post-description. Now, for making sense, we will create some models that are blueprints or contrast defining how a post looks like in our angular application. We will follow the following steps to create a model in our application:

1) We will create a new file in our posts folder, not a folder and give it the name model.ts. This file will be used to create a model for our post.

2) In this file, we will use another typescript feature called the interface. An interface is just like a class that defines how an object looks like. An interface cannot be instantiated, and it's more like a contract. We use it to create our own type to force a certain object to look like this.

We define the fields and methods to the interface which it should have. We define a title field, and a content field that should be of type string and this interface is coded in the following way:

It defines the clear definition of how a post looks like in our application. In the above code line, we used the export because we will also use it in other components.

3) Now, we will go back to our component.ts file and import the Post interface here from the post.model.ts file. Now, we will create the Storedpost array of type Post by simply adding a colon and then post [] in the following way:

4) We will also go back to our post-list.component.ts file, and here we also do the same thing with a list of post. We will make the list of posts of type Post in the following way:

5) We will also go back to our post-create.component.ts file and import the post. When ^we create a post, then it should be of type Post. So, we will make constant post property of type Post. We also need to define the Post type into our emitter because we need to define that the data which is going to be emitted is of Post type. So, this complete thing is coded in the following way:

In the next section, we will learn about the form and how we can add forms in our application.