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

Chapter 4. Building a Basic Component

At its core, an Angular 2 component is a class that is responsible for exposing data to the view and implementing user interaction logic. An Angular 2 component can be compared to the controller, scope, and view of Angular 1.

How does Angular 2 know how to treat our class as a component? We need to attach metadata to the class to tell Angular how to treat it.

The term metadata describes the additional information that we add to our code. This information is used by Angular 2 at runtime.

In this chapter, we will cover the following topics:

  • The anatomy of an Angular 2 component

  • The component selector

  • Component template

  • Component style

  • View encapsulation (the shadow DOM)

  • Data binding

  • Anatomy of an Angular 2 component

In Chapter 2, Setting Up an Angular 2 Development Environment with angular-cli, setting the development environment, we generated an Angular 2 project from scratch using the angular-cli tool and served it to the browser. If you haven't done so, refer...