Angular - Components

Everything in angular is a component!

• Components are the basic building blocks in Angular. 
• A component in Angular allows us to create a reusable UI widget.
• A component can be used inside another component - Nested Components

A component in Angular is a class with a view template and a decorator. In simple terms we can say a component in angular is composed of

o   Template

§  Defines the user interface.

§  Contains html, directive and data bindings)

o   Class

§  Contains the code for the view template.

§  Like any object oriented programming language like C# or Java, a class in Angular can contain properties and methods.

§  Properties contain data for the view template.

§  Methods contain logic for the view template

o   Decorator

§  Adds meta data to the class, for making it an Angular Component

§  Applying decorator to a class is similar to applying attributes to a class in C#.

Example: An Angular application always need to have a root component called AppComponent

In below example:

• A class AppComponent is defined with export keyword to make that usable in other part of the application.  
• This class has only one property called name and a value ”Angular 2” is stored in it.
• To add the component decorator (provided by Angular) we need to use import keyword (which is similar to using keyword in C#) in below example we are importing “Component” from “angular/core”.
• Now Apply “Component” Decorator to the class (right now we are just using two properties from the Component Decorator)

o   selector – contains the directive name, where we want this component to be displayed. In our example its inside index.html

o   template  - defines HTML required for the view. And HTML required should be inside Backtick character

• {{ }} – databinding expression
• At runtime the default content from <my-app> directive will be replaced with above defined component’s template.

PS: You can use single quotes or double quotes in place of Backtick character when view template HTML is in single line, if the view template HTML is in more than one line you must use backtick character else you will get an error.

We can have either an inline view template as above or an external view template as below (for the same above example):

The external template view, is referred with keyword 'templateUrl' in decorator. The path value is relative to the index.html (the file which uses the component)

Disadvantages of having inline view templates:

• We loose VisualStudio editor intellisense, code-completion and formatting features.
• TypeScript code is not easier to read and understand when it is mixed with the inline template HTML.

Advantages of having external view template:

• We have  loose VisualStudio editor intellisense, code-completion and formatting features available.
• Not only the code in TypeScript file (in our example app.component.ts) is clean but also easier to read and understand.

Angular 2 recommends to extract templates to a separate file (external view template), if  view template HTML is longer than 3 lines.