Building Large-Scale Web Applications with Angular

Define your model using interfaces

Now that your View and ViewModel are in place, you need to define your Model. If you look back on the design, you will see that the component needs to display:

• City
• Country
• Current date
• Current image
• Current temperature
• Current weather description

You will first create an interface that represents this data structure:

1. In the terminal, execute npx ng generate interface ICurrentWeather
2. Observe a newly generated file named icurrent-weather.ts with an empty interface definition that looks like this:

src/app/icurrent-weather.tsexport interface ICurrentWeather {}

This is not an ideal setup, since we may add numerous interfaces to our app and it can get tedious to track down various interfaces. Over time, ...