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

Life cycle event interfaces


In order to run our own logic on each one of the component life cycle events, we need to implement the desired method that corresponds to the event we want to react to. Each one of those events is published as a TypeScript interface, which we can implement in our component class. The use of TypeScript interfaces is optional and won't affect our application in any way at all. You can learn about TypeScript interfaces from the documentation on the TypeScript website at http://www.typescriptlang.org/docs/handbook/interfaces.html. We won't use this in our code examples.

OnInit and OnDestroy

The simplest, most straightforward, and most easy-to-understand life cycle event hooks are onInit and onDestroy.

The ngOnInit method is called after the component data-bound properties have been checked for the first time, and ngOnDestroy will be called right before the component instance is destroyed by Angular. In our component hierarchy, we will implement both of these methods...