Components

Angular components are inspired by the Web Components specification. At a very high level, Web Components have four pieces:

• Custom elements: A user can create their own HTML element.
• HTML imports: Import one HTML document into another.
• Templates: HTML definitions of the custom elements.
• Shadow DOM: A specification to write encapsulated logic of custom elements.

The preceding four specifications explain how a frontend developer can develop their own standalone, isolated, and reusable components, similar to a HTML select box (<select></select>), or a text area (<textarea></textarea>), or an input (<input />).
You can read more about the Web Component specification here: https://www.w3.org/standards/techs/components#w3c_all.

If you would like to dig deeper into the Web Component, check out: http://webcomponents.org/.

As mentioned, Angular is (loosely) built on Web Components, where the preceding four specifications are implemented in an Angular way.

In simple terms, our entire app is a tree of components. For example, if we look at the world's most viewed page, https://www.google.com, it would look something like this:

And if we had to build this page in Angular, we would first split the page into components.

A visual representation of all the components that go into the preceding page would look like this:

Note: Each black box is a (custom) component.

As we can see from the preceding figure, the entire page is a tree of custom components.

A (custom) component would typically consist of three pieces:

• component.ts: This represents the component logic
• component.html: This represents the component view (template)
• component.css: This represents the component specific styles

To build a custom component, we need to use a Component decorator on top of a class. In simple terms, a decorator lets us configure a class with specific metadata on them. This metadata will then be used by Angular to understand the behavior of that class. Decorators start with an @, followed by the name of the decorator.

The component decorator tells Angular that the class being processed needs to exhibit the behavior of an Angular component. A simple decorator would look as follows:

@Component({ 
  selector: 'app-root', 
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
  // This is where we write the component logic! 
  title = 'Hello World!'; 
}

Some of the properties that go into a component decorator are:

• selector: CSS selector that identifies this component in a template
• templateUrl: URL to an external file containing a template for the view
• styleUrls: List of URLs to style sheets to be applied to this component's view
• providers : List of providers available to this component and its children

To know more about the Component decorator, refer to the following link: https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html