Book Image

Angular 2 Components

By : Robin Böhm, Nir Kaufman, Thierry Templier Thierry
Book Image

Angular 2 Components

By: Robin Böhm, Nir Kaufman, Thierry Templier Thierry

Overview of this book

This book is a concise guide to Angular 2 Components and is based on the stable version of Angular 2. You will start with learning about the Angular 2 Components architecture and how components differ from Angular directives in Angular 1. You will then move on to quickly set up an Angular 2 development environment and grasp the basics of TypeScript. With this strong foundation in place, you will start building components. The book will teach you, with an example, how to define component behavior, create component templates, and use the controller of your component. You will also learn how to make your components communicate with each other. Once you have built a component, you will learn how to extend it by integrating third-party components with it. By the end of the book, you will be confident with building and using components for your applications.
Table of Contents (16 chapters)
Angular 2 Components
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

Breaking the application into components


The angular 2 application is a set of components. We define a component for every UI element, view and route. We must define a root component that we will use as a container for all other components. In other words, an Angular 2 application is a tree of components.

The key for a well-designed, component-oriented Angular 2 application is to break the UI in to a tree of components successfully. For example, let's talk about a simple mobile to-do list application, which looks like this:

The components tree that composes this UI will look like this:

This application is made up of nine components. At the root is the Application component, which contains all the other components. Next, we find the Form component, which is built from an Input component and a Button component.

The TaskList component is a container for the TaskRow component. Each TaskRow comprises three components—a CheckBox, a Label, and a Trash icon.

There is no strict rule about how many components you should create, but a best practice is to break the UI to as many components as we can. The number of components will affect the other aspects of the application such as reusability, maintenance, and testing.