Angular 4

Building Blocks of Angular 4

There are 5 section cover in this blog ..

1. module 
2. component 
3. template
4. metadata
5. data-binding

Module

module is a class with ng-module metadata, every angular app has at least one root module encapsulation of different similar functionalities 

how to declare :

@ngmodule({ //decorator

    declareation :[AppComponent,TaskComponent],         //declare Component

    imports :[BrowserModule,FormsModule,HttpModule], //import Module

    providers:[],

bootstrap:[AppComponent] //providing services to all modules component

})

Component

Angular 4 components are simply classes that are designated as a component with the help of a component decorator. 

Every component has a defined template which can communicate with the code defined in the component class. So, let's take a close look at how components are structured.

Metadata

metadata describes how to process the class ,decorator is used to attach metadata

example :  myclass + @Component({---}) /// decorator ==> Component{}

appclass + @NgModule({....}) ===>Module

Templates

used to define view of a component 

looks like HTML, expect for a few differences .

describes how the component is rendered on the page.

Data-Binding

data-binding plays an important role in communication between a template and its component

{{value}}

1.interpolation     DOM <======================= component

[property]="value"

2.property binding   DOM <======================= component 

(event)="event handler"

3.event binding   DOM ========================> component

[{ngModel}]

4. 2 way data binding   DOM <=======================> component