Book Image

Mastering Angular Components - Second Edition

By : Kunz
Book Image

Mastering Angular Components - Second Edition

By: Kunz

Overview of this book

Mastering Angular Components will help you learn how to invent, build, and manage shared and reusable components for your web projects. Angular components are an integral part of any Angular app and are responsible for performing specific tasks in controlling the user interface. Complete with detailed explanations of essential concepts and practical examples, the book begins by helping you build basic layout components, along with developing a fully functional task-management application using Angular. You’ll then learn how to create layout components and build clean data and state architecture for your application. The book will even help you understand component-based routing and create components that render Scalable Vector Graphics (SVG). Toward the concluding chapters, you’ll be able to visualize data using the third-party library Chartist and create a plugin architecture using Angular components. By the end of this book, you will have mastered the component-based architecture in Angular and have the skills you need to build modern and clean user interfaces.
Table of Contents (12 chapters)

Spaceship Dashboard

When I was a child, I loved to play spaceship pilot. I piled up old carton boxes and decorated the interiors to look like a spaceship cockpit. With a marker, I drew a spaceship dashboard on the inside of the boxes, and I remember playing in there for hours.

The thing that's special about the design of cockpits and spaceship dashboard is that they need to provide an overview and control over the whole spaceship, in very limited space. I think the same applies to application dashboards. A dashboard should provide the user with an overview and a sense of the overall status of what's going on.

In this chapter, we will create such a dashboard for our task management application. We will make use of the open source charting library Chartist to create good looking, responsive charts and provide an overview of open tasks and project statuses:

A preview of...