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

The basic structural directive

As we mentioned at the beginning of this chapter, the third type of directive is called structural directives, and as the name suggests, those directives are meant to manipulate the element that they applied on. Angular core includes several directives that manipulate the DOM, such as ngIf, ngFor, and ngSwitch.

For our example, we will implement our own ngIf directive that behaves just like the original one.

First, create a new file named only-if.ts and let's define the basic structure for our directive:

import { Directive } from '@angular/core';

  selector: '[onlyIf]'
export class OnlyIf {

The structural directives begin their lives just like an attribute directive. We import the @Directive decorator from the Angular core and declare the selector as an attribute.

Next, we will need to access the template, and we will need some kinds of container so we can attach or remove views. For this, we will need to inject TemplateRef and ViewContainerRef...