Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search 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
  • Feedback & Rating feedback
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
chevron up
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
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

Generating an Angular 2 project

The first command that we will use with angular-cli is new. This command will create a folder structure for our project and install all the required dependencies. Along with the basic Angular 2 files and modules, angular-cli will install modules for testing, linting, and documenting our code. This book is all about components, so we won't touch most of this stuff. You can read more about the available commands on the official angular-cli page: https://cli.angular.io/.

To generate a new project, follow these steps:

  1. Launch the Terminal (or command-line in Windows).
  2. Type ng new ng_components and press Enter.

The angular-cli software will generate a new project under the current directory:

Generating an Angular 2 project

Note that the last line prints: Installing packages for tooling via npm. The angular-cli tool will download all the required modules using standard npm command behind the scenes.

That's it! You just generated a complete Angular 2 project with everything you need already...

Visually different images
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 2
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