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.

    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

    Product information

    • Title: Angular 2 Components
    • Author(s): Nir Kaufman, Thierry Templier
    • Release date: November 2016
    • Publisher(s): Packt Publishing
    • ISBN: 9781785882340