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

Importing dependencies


Since we are going to wrap a component from the bootstrap library, we first need to download and import the bootstrap library and its dependencies and import it in to our code. The first step will be to install bootstrap with npm. Open the Terminal, make sure that you are inside the project root, and type npm install bootstrap -S. This command will download the bootstrap files into the node_modules and write it on the package.json.

Since bootstrap is dependent on jQuery library, we need to install it as well. We will use npm for it as well. In the Terminal, type npm install jquery –S.

We also need to install corresponding typings for these two libraries to be able to compile the application. The names of the corresponding typing modules are the same as the target libraries but with the @types prefix. To install them, just use the following command:

npm install @types/jquery @types/bootstrap --save-dev

The CSS file of the Bootstrap library needs to be configured globally...