Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Angular 2 Components
  • Table Of Contents Toc
Angular 2 Components

Angular 2 Components

By : Templier Thierry
Buy this Book
close
close
Angular 2 Components

Angular 2 Components

By: Templier Thierry
Buy this Book

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

Managing dependencies with modules

One of the most important changes introduced in JavaScript is modules. A module is a JavaScript file that gets loaded in a special way. All variables and declarations are scoped to the module. If we like to expose some code to the outside world, we need to export it explicitly. If you try to log the value of this in the top level of the module, you will get undefined.

The export and import statements

The export and import keywords are used to define which part of the code should be exposed to other modules, and which code we will like to import from another module. The following module exposes a function, a class, and a variable:

[user.ts]
export function getRandomNumber() {
  return Math.random();
}

export class User {
  constructor(name) {
    this.name = name;
  }
}

export const id = 12345;

To use this exported code, we need to import it in another module. We can import this code in various ways:

// import only the function from the module
import { getRandomNumber...
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Angular 2 Components
End of Section 3
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options
font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon