Book Image

Mastering Angular 2 Components

By : Gion Kunz
Book Image

Mastering Angular 2 Components

By: Gion Kunz

Overview of this book

<p>Through this book, you will learn how to use Angular 2 and its component-based architecture in order to develop modern user interfaces. A new holistic way of thinking about UI development will be established throughout this book, and you will discover the power of Angular 2 components through many examples. This book is based on Release Candidate 1(RC1) of Angular 2.</p> <p>On this journey, you'll discover the benefits of component-based user interfaces over the classical MVC design. Also, you will get a chance to compare a classical MVC with a component-based approach and understand the challenges of modern user interfaces. You will learn the very basics of the required core technologies and the setup needed to get going with Angular 2, and progressively enhance your understanding of Angular 2 components by working on the example application.</p> <p>After reading the book and following the example application, you will have built a small-to-mid-sized application with Angular 2 using a component-based UI architecture.</p>
Table of Contents (19 chapters)
Mastering Angular 2 Components
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Projects dashboard


In this chapter, we'll create a projects dashboard, which will consist of the following components:

  • Tasks chart: This is where we'll provide a visual overview on open tasks over time. All projects will be represented in a line chart that displays the progress of open tasks. We'll also provide some user interaction so that the user can choose between different timeframes.

  • Activity chart: This component visualizes activities in a bar chart over a timeframe of 24 hours. This will help our users quickly identify overall and peak project activities.

  • Project summary: This is where we'll display a summary of each project where we outline the most important facts. Our project summary component will also include an activity chart component that visualizes project activity.

  • Projects dashboard: This component is just a composition of the previous two components. This is our main component in the dashboard. It represents our dashboard page and is directly exposed to the router.

Creating...