Angular 2 - High Level Overview - Components

Everything Is a Component

The whole idea behind building a web application with Angular 2 is the use of components. Everything in Angular 2 is a component, including the web page itself.



In Angular 2 the top-most component in the hierarchy is the root component, and all of the other components in the site are nested in the root component. Officially, the root component is represented by the following three files in the Angular 2 framework:

  • app.component.ts
  • app.component.html
  • app.component.css

When you create a new component using the Angular CLI (more on this later) you automatically get 3 different files for each component, in this case:
app.component.ts
app.component.html
app.component.css

I built the diagram below to help you understand how these 3 files of each component work together:



The app.component.ts file (green bar) is the TypeScript file containing the definition for the component. Line 1 defines the type (Component) and lines 3-7 are the decorator that customizes this particular instance of the component. Line 9 defines a variable called "title" with the value "app works! yeah Rich!".

You can define any desired CSS styles you like into the myComponent.component.css file and those styles will only be applied to its corresponding .html file. Some people enjoy this while others continue to build out a global .css file and put their styles in there... entirely up to you.

When the page is requested this line gets injected into the app.component.html file (pink bar) where the "title" placeholder (line 2) gets replaced and displayed to the browser (yellow bar).

How does it end up in the final page output? Because on line 4 in app.component.ts the selector is identified to target in index.html, and the placeholder in the <app-root>Loading...</app-root> gets replaced with the content from app.component.html. Follow the arrows and the flow might make a little more sense....

Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/angular2/angular-2-high-level-overview-components/