Creating our model

Before we start building our first component, let's first create our model. A model is an entity that represents some logical data. Here, in our case, we will have two primary models, namely news and articles. The article model represents the articles that are fetched from the specific website, and the news model is the enclosing model of articles that will contain the array of articles.

In this chapter, we are not making a live web service call to fetch the articles, but will just hardcode the data to show the initial binding aspect of the application. But it is useful to understand the data format from the web service response so that we can identify the model structure that needs to be created. The following is one such response from NFL news:

{
"status": "ok",
"source": "nfl-news",
"sortBy": "top",
"articles": [
    {
     "author": "Lakisha Jackson",
     "title": "Mike Williams denies report on season-
    ending surgery",
     "description": "Los Angeles Chargers first-round pick 
    Mike Williams is denying reports that he might need 
    season-ending back surgery. The rookie wideout 
    addressed the rumors during Alshon Jeffery's camp 
    on Saturday.",
     "url": "http://www.nfl.com/news/story/
    0ap3000000821316/article/mike-williams-denies-
    report-on-seasonending-surgery",
     "urlToImage": "http://static.nfl.com/static/content/
    public/photo/2017/07/22/
    0ap3000000821315_thumbnail_200_150.jpg",
     "publishedAt": "2017-07-22T23:21:00Z"
    },
    {
     "author": "Jeremy Bergman",
     "title": "Tamba Hali, upset with snaps, launches 
    tweetstorm",
     "description": "We've got ourselves a Saturday 
    afternoon tweetstorm in late July, courtesy of 
    Chiefs pass rusher Tamba Hali. The veteran bemoaned 
    his lack of snaps in the Chiefs' playoff loss to 
    Pittsburgh.",
     "url": "http://www.nfl.com/news/story/
    0ap3000000821309/article/
    tamba-hali-upset-with-snaps-launches-tweetstorm",
     "urlToImage": "http://static.nfl.com/static/content/
    public/photo/2017/07/22/
    0ap3000000821310_thumbnail_200_150.jpg",
     "publishedAt": "2017-07-22T20:30:00Z"
    }
]
}

As we can see, the JSON has two parts to it. The first part provides us with basic information about the web service call, such as status, source, and criterion with which we called the web service. The second part is the array of articles that are returned by the new website. The article array consists of article objects that have the following properties:

• author
• title
• description
• url
• urlToImage
• publishedAt

Under the src folder, add a new folder named models. This folder will contain all our models that will be required to manage data for our application. Once the folder is created, let's create our first file, article.ts.

The Article model looks like the following:

export class Article{
  author:string;
  title:string;
  description: string;
  url:string;
  urlToImage:string;
  publishedAt:Date;
}

Here, we created all the properties in the Article class we had identified in our web service response. All the properties are public in their scope as that is the default access modifier in TypeScript.

Next up is the news.ts file, which will be our parent model and will have an array of articles and status details. The following is the model that we created:

export class News {
  status:string;
  source:string;
  sortBy:string;
  articles: Article[];
}

Here, as we are referencing another file (article), we need to import that in our news class by writing the following code at the top of the news.ts file:

import {Article} from './Article';

This takes care of our models. Now let's create our first component.