Book Image

Angular 2 Components

By : Thierry Templier Thierry
Book Image

Angular 2 Components

By: 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

Components and directives in Angular 2


Up until now, we have built components. But components do not replace the directives that we are familiar with from Angular 1. If you are not familiar with Angular 1 directives, don't worry, we will explain the difference in a minute.

Let's start by defining what a directive is in Angular terminology: a directive is a custom attribute or an element that extends HTML tags by adding custom behavior.

In Angular 2, we have three types of directive: component directive, attribute directive, and structural directive. We are already familiar with components, so let's define the other types:

  • Attribute directive: This changes the appearance or behavior of an element. One example for this can be the NgStyle directive from Angular core.

  • Structural directive: This manipulates the DOM, just like NgFor and NgSwitch from the Angular core.

Directives as opposed to components, do not require a template, and usually define a selector as an attribute.