In Angular2 we have 8 building blocks that help us to create an angular application. In this article I have
mention 6 of them so that we get an idea what are they and where they can be used this is the architecture overview. This is just a brief introduction. Each building blocks will be explained in near
future in separate articles.


In our angular application we must have at least one module class conventionally it is Appmodule and also called as a root module . When we create code file we create modules can be created by using export keyword.

like if we create a file mylist.ts and use export class MyList{}

to use that we have to import the file and use where we required.


import {MyList}
from './mylist';


Our web application have different building blocks like Header , Menu , Footer, Information area etc. In angular these different section is known as component. In short, we merge different components to create the whole page. A components is created with the help of templates, classes and meta data.


Each component has a templates which contains the html which is used to show the content in the user interface. Its just a view. 

Meta data:

Additional information about a template is provided in templates. Its role is to guide the angular about how the class (that contain properties and method ) should be processed. 


// here we have metadata 



is selector , template, provider.

Data Binding:
we use data binding where we have to show our data in the html . This is a medium through which we can show our data in the html.

: <p>{{classobject.propertyname}} </p>

Data binding can be one way or two way. Two way binding means that if we change the value of the property than the property will have the latest changes.


We need a mechanism to connect with the database or we need to writethe logic or function, this is done in angular2 in Services class .Basically its just a class and we need to import that class where we
need to use the services.

If you want to add more comments to the article or you see any thing incorrect please write a comment below and we will surely get back to you.

Trending Articles

How to setup angular2 in visual studio ide

How to use ninject dependency injection in mvc

Command Query Separation (CQS) in C#

How to Add Comparison Feature in Replace in C-Sharp

ASP.NET Web API — Part 1

Building Blocks of Angular2

Life cycle hooks in Angular js 2

Calculate nth Highest salary of an employee