Book Image

Angular 2 Components

By : Thierry Templier Thierry
Book Image

Angular 2 Components

By: Thierry Templier Thierry

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 (16 chapters)
Angular 2 Components
About the Authors
About the Reviewers

Encapsulation modes

By default, as we have seen, our component won't encapsulate its structure and styling. This means that CSS classes from outside of the component can override and affect the embedded CSS styles that we defined, and the HTML structure of the component is accessible as well.

Angular will generate a unique property for our selector to protect our styling, but this can be overridden with a CSS !important statement.

To change this, we need to define an encapsulation mode. Angular 2 provides us three options to choose from:

  • Emulated (the default): Angular will add a special attribute to the class selector to avoid affecting other styles outside of the components.

  • Native: This is the native encapsulation mechanism of the renderer that will be applied. In our case, it's the browser. Angular will create a shadow DOM for this component, which means that external CSS can't affect our component.

  • None: No encapsulation will be applied.

To define encapsulation options, we need to import...