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
About the Authors
About the Reviewers

The component template

The template is the heart of the component in Angular 2. Without a template there is nothing to render to the DOM. There are two ways to attach a template to the component:

  • Providing a URL to an external html file

  • Define the template inline

The app-root that is created by the angular-cli includes an external template. It is defined with the templateUrl property:

  selector: 'app-root',
  templateUrl: './app.component.html'

We can find the template next to app.component.ts as an HTML file with the same name app.component.html. Let's open it to inspect the code:


Now we know where the <h1> came from. As you can guess, the double curly braces render the title from the component class.

If we want to declare our templates inline, we should use the template property instead. Luckily, in ES6, we are introduce with a way to create multiline strings easily. This feature is called template...