O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Angular 2 Components

Book Description

A quick and concise guide to Angular 2 Components

About This Book

  • First look to the Angular 2 Components architecture
  • Creating your own Angular 2 Component
  • Integrating your components with third party components

Who This Book Is For

If you are a front-end developer with some experience in Angular and want to understand Angular 2 Components, and easily put it to use to create powerful user interfaces and views, then this book is for you

What You Will Learn

  • Break your application into reusable dynamic components
  • Take advantage of TypeScript in Angular 2
  • Migrate your Angular 1 directive to an Angular 2 Component
  • Understand the Angular 2 component structure and APIs
  • Hook to component life cycle events
  • Bind dynamic data to your component properties
  • Communicate with other components using events
  • Compose complicated UIs from simple components

In Detail

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.

Style and approach

A step-by-step guide covering features and working of Angular 2 Components along with the process for creating your own components.

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. Angular 2 Components
    1. Table of Contents
    2. Angular 2 Components
    3. Credits
    4. About the Authors
    5. About the Reviewers
    6. www.PacktPub.com
      1. eBooks, discount offers, and more
        1. Why subscribe?
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    8. 1. Angular 2 Component Architecture
      1. The Model-View-Controller pattern
      2. MVC in Angular 1
      3. Moving from views to components
      4. Defining components
      5. Breaking the application into components
      6. Summary
    9. 2. Setting Up an Angular 2 Development Environment with angular-cli
      1. Node and npm
        1. Installing Node
        2. Introducing npm
      2. Installing angular-cli
      3. Generating an Angular 2 project
      4. Choosing an IDE
      5. Summary
    10. 3. The TypeScript Primer
      1. Introduction to TypeScript
      2. Managing dependencies with modules
        1. The export and import statements
        2. The default exports
      3. Classes
      4. The type system
        1. The basic types
        2. The custom types
        3. About generics
      5. Using decorators
        1. Decorators versus annotations
      6. Summary
    11. 4. Building a Basic Component
      1. Bootstrapping the application
      2. The component selector
        1. Selector options
      3. The component template
        1. Embedding styles in component template
      4. The shadow DOM
      5. Encapsulation modes
      6. Data bindings
      7. Summary
    12. 5. Building Dynamic Components
      1. Data interpolation
      2. Core directives
        1. NgIf
          1. The asterisk – *
        2. NgClass
        3. NgStyle
        4. NgSwitch
        5. NgFor
      3. Property bindings
      4. Event bindings
      5. Two-way bindings
      6. Summary
    13. 6. Component Communication
      1. Passing data via properties
      2. Emitting custom events
        1. Referencing with a local variable
      3. Querying child components with the parent component
      4. Summary
    14. 7. Putting It All Together
      1. Preparing our development environment
      2. The accordion component
        1. Extending the accordion component tree
      3. The component life cycle
      4. Life cycle event interfaces
        1. OnInit and OnDestroy
        2. OnChanges
      5. Other life cycle events
      6. Summary
    15. 8. Integrating Third-Party Components
      1. Preparing our development environment
      2. Importing dependencies
      3. Bootstrap tooltip component
      4. Bootstrap collapse component
      5. Summary
    16. 9. Angular 2 Directives
      1. Components and directives in Angular 2
      2. Preparing our development environment
      3. The basic attribute directive
        1. ElementRef and Renderer
        2. Reacting to events from the host element
        3. Passing properties to the directive
      4. The basic structural directive
      5. Summary
    17. Index