Angular - Anatomy Of Angular Application (Component)

The angular application comprises of Multiple components and Services. Services provide common functionalities to your components.

Angular Application Skeleton

Components:

The component is a class with a template and decorator

Components are made up of template, class and MetaData

• Template - Defines UI. Contains HTML, Bindings and directives 
• Class - Same as C# or any OOPS class which can be written using Typescript
• Contains Properties and Functions
• Properties provide data to Template and function provides logic to Template
• MetaData - Class will be decorated with MetaData (Like attributes in C#)
• Metadata will convert normal Typescript class to Angular component

Component Code:

• By default root component in Angular named as AppComponent
• Multiple components combined together and create a Module. Every Angular must have at least one module

Decorator:

• The decorator will provide metadata to our class.
• It can contain the properties which tell us how index.html page will use properties of a class. Consider the above example. The decorator has 3 properties. 

• Selector - The value to this property will act as an HTML directive in index.html
• templateUrl - Path of the HTML file whose content to be replaced within the selector directive at runtime
• the template property also can be used if the content to be replaced within the directive is very small. In this case, HTML content will be hardcoded in the template property within backticks (` `)
• The decorator can contain other properties too which is not mentioned in this example. Full list can be seen in Angular website