Summary

We started this chapter with the aim of creating a complex Angular app. The 7 Minute Workout app fitted the bill, and you learned a lot about the Angular framework while building this app.

To build the app, we started off by defining the model of the app. Once the model was in place, we started the actual implementation by building an Angular component. Angular components are nothing but classes that are decorated with a framework-specific decorator, @Component.

We also learned about Angular modules and how Angular uses them to organize code artifacts.

Once we had a fully functional component, we created a supporting view for the app. We also explored the data binding capabilities of the framework, including property, attribute, class, style, and event binding. Plus, we highlighted how interpolations are a special case of property binding.

Components are a special class of directives that have an attached view. We touched upon what directives are and the special classes of directives, including attribute and structural directives.

We learned how to perform cross-component communication using input properties. The two child components that we put together (ExerciseDescriptionComponent and VideoPlayerComponent) derived their inputs from the parent WorkoutRunnerComponent using input properties.

We then covered another core construct in Angular, pipes. We saw how to use pipes such as the date pipe and how to create one of our own.

Throughout the chapter, we touched upon a number of Angular directives, including the following:

• ngClass/ngStyle: For applying multiple styles and classes using Angular binding capabilities
• ngFor: For generating dynamic HTML content using a looping construct
• ngIf: For conditionally creating/destroying DOM elements
• ngSwitch: For creating/destroying DOM elements using the switch-case construct

We now have a basic 7 Minute Workout app. For a better user experience, we have added a number of small enhancements to it too, but we are still missing some good-to-have features that would make our app more usable. From the framework perspective, we have purposefully ignored some core/advanced concepts such as change detection, dependency injection, component routing, and data flow patterns.

Lastly, we touched upon an important topic: cross-component communication, primarily using Angular eventing. We detailed how to create custom events using the @Output decorator and EventEmitter.

The @ViewChild and @ViewChildren decorators that we touched upon in this chapter helped us understand how a parent can get hold of a child component for use. Angular DI also allows injecting a parent component into a child.

We concluded this chapter by building a WorkoutAudioComponent and highlighted how sibling-component communication can happen using Angular events and template variables.

What's next? We are going to build a new app, Personal Trainer. This app will allow us to build our own custom workouts. Once we can create our own workout, we are going to morph the 7-Minute Workout app into a generic Workout Runner app that can run workouts that we build using Personal Trainer.

For the next chapter, we'll showcase Angular's form capabilities while we build a UI that allows us to create, update, and view our own custom workouts/exercises.