Angular2 :

● Javascript Framework
● No MVC
● Component Based
● Written in TypeScript
● Can develop mobile,web and desktop application

Transpiler: (ES6 > ES5)

Convert TypeScript into Javascript
Current javascript version ES5 - it will support in all browsers

Angular4 :
Install Angular CLI
npm install -g @angular/cli

Create New Angular-project

ng new hello-world

Run the Project

cd hello-world
npm install
ng serve
Access Application -​ ​http://localhost:4200

Folder structure :
1. e2e​ - end to end tests
2. node_modules​ - third party libraries
3. src​ - source code of application

Component :
data and logic for a view
Src/app folder
AppComponent is ​root component for our application.
● app.component.css
● app.component.html
● app.component.spec.ts
● app.component.ts
 ● app.module.ts
HTML file
CSS file - Scope to particular component
Spec file - includes the unit tests
TypeScript File - Here we can define start(data) and behavior(logic) of our component.
app.module.ts file - root module of the application

Create Component​ :
ng g c product (g -generate , c -component)
Src/app/product folder will be created.
● product.component.css
● product.component.html
● product.component.spec.ts
● product.component.ts

//ts file
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
constructor() { }
ngOnInit() {
}
title = 'USB Stick 8GB';
}
//html
<app-product></app-product>

Property binding
<p [innerHtml]="title"></p>
<p>{{title}}</p>
[value]="empName"
[innerHtml]="rollNo"
(click)="submit()"

Event binding [keyboard/mouse input]

<button (click)="addItem()">Add</button>
export class ProductComponent {
title = "USB Stick 8GB";
itemCount = 0;
addItem() {
this.itemCount++;
}
}
Twoway binding
[(ng-model)="myName"]