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
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
chevron up
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

The component template

The template is the heart of the component in Angular 2. Without a template there is nothing to render to the DOM. There are two ways to attach a template to the component:

  • Providing a URL to an external html file

  • Define the template inline

The app-root that is created by the angular-cli includes an external template. It is defined with the templateUrl property:

[app.component.ts]
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

We can find the template next to app.component.ts as an HTML file with the same name app.component.html. Let's open it to inspect the code:

[app.component.html]
<h1>
  {{title}}
</h1>

Now we know where the <h1> came from. As you can guess, the double curly braces render the title from the component class.

If we want to declare our templates inline, we should use the template property instead. Luckily, in ES6, we are introduce with a way to create multiline strings easily. This feature is called template...

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 4
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