Building Our First App - 7 Minute Workout

We will be building a new app in Angular, and in the process, become more familiar with the framework. This app will also help us explore some new capabilities of Angular.

The topics that we will cover in this chapter include the following:

• 7 Minute Workout problem description: We detail the functionality of the app that we build in this chapter.
• Code organization: For our first real app, we will try to explain how to organize code, specifically Angular code.
• Designing the model: One of the building blocks of our app is its model. We design the app model based on the app's requirements.
• Understanding the data binding infrastructure: While building the 7 Minute Workout view, we will look at the data binding capabilities of the framework, which include property, attribute, class, style, and event bindings.
• Exploring the Angular platform directives: Some of the directives that we will cover are ngFor, ngIf, ngClass, ngStyle, and ngSwitch.

• Cross-component communication with input properties: As we build nested components, we learn how input properties can be used to pass data from the parent to its child components.
• Cross-component communication with events: Angular components can subscribe to and raise events. We get introduced to event binding support in Angular.
• Angular pipes: Angular pipes provide a mechanism to format view content. We explore some standard Angular pipes and build our own pipe to support conversions from seconds to hh:mm:ss.

Let's get started! The first thing we will do is to define our 7 Minute Workout app.