Book Image

Angular 2 Components

By : Templier Thierry
Book Image

Angular 2 Components

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

Related Content you might be interested in

Current Title:

Small book image
Angular 2 Components
Templier Thierry
Nov, 2016 | 124 pages
No titles found
Table of Contents (11 chapters)
Preface
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Free Chapter
1
1. Angular 2 Component Architecture
1. Angular 2 Component Architecture
The Model-View-Controller pattern
MVC in Angular 1
Moving from views to components
Defining components
Breaking the application into components
Summary
2
2. Setting Up an Angular 2 Development Environment with angular-cli
2. Setting Up an Angular 2 Development Environment with angular-cli
Node and npm
Installing angular-cli
Generating an Angular 2 project
Choosing an IDE
Summary
3
3. The TypeScript Primer
3. The TypeScript Primer
Introduction to TypeScript
Managing dependencies with modules
Classes
The type system
Using decorators
Summary
4
4. Building a Basic Component
4. Building a Basic Component
Bootstrapping the application
The component selector
The component template
The shadow DOM
Encapsulation modes
Data bindings
Summary
5
5. Building Dynamic Components
5. Building Dynamic Components
Data interpolation
Core directives
Property bindings
Event bindings
Two-way bindings
Summary
6
6. Component Communication
6. Component Communication
Passing data via properties
Emitting custom events
Querying child components with the parent component
Summary
7
7. Putting It All Together
7. Putting It All Together
Preparing our development environment
The accordion component
The component life cycle
Life cycle event interfaces
Other life cycle events
Summary
8
8. Integrating Third-Party Components
8. Integrating Third-Party Components
Preparing our development environment
Importing dependencies
Bootstrap tooltip component
Bootstrap collapse component
Summary
9
9. Angular 2 Directives
9. Angular 2 Directives
Components and directives in Angular 2
Preparing our development environment
The basic attribute directive
The basic structural directive
Summary
10
Index
Index

Chapter 4. Building a Basic Component

At its core, an Angular 2 component is a class that is responsible for exposing data to the view and implementing user interaction logic. An Angular 2 component can be compared to the controller, scope, and view of Angular 1.

How does Angular 2 know how to treat our class as a component? We need to attach metadata to the class to tell Angular how to treat it.

The term metadata describes the additional information that we add to our code. This information is used by Angular 2 at runtime.

In this chapter, we will cover the following topics:

  • The anatomy of an Angular 2 component
  • The component selector
  • Component template
  • Component style
  • View encapsulation (the shadow DOM)
  • Data binding
  • Anatomy of an Angular 2 component

In Chapter 2, Setting Up an Angular 2 Development Environment with angular-cli, setting the development environment, we generated an Angular 2 project from scratch using the angular-cli tool and served it to the browser. If you haven't...

Previous Section
End of Section 1
Next Section