Angular 2.

Quick reference

npm install Node command to install packages

Typescript command to install typescript

tsd install
packages

touch <filename> Create empty file

Typescript compiler command to compile

tsc
typescript file to javascript

Provide your type definition file

/// <reference path="<path>" /> (.tsd)/typescripts(.ts) /other packages path to
import classes/modules/components

Import
classes/components/constants/services to use
in current class using this syntax. Remember to
provide correct filename with relative path in
import {<name of component>} from
from without .ts/.js extension.
'<filename>';
For example, if you have PhoneService.ts file
with PhoneService class defined, use below
syntax
import {PhoneService} from 'PhoneService';

Apply @Component annotation to class to

make it Component. In html you can use your
@Component({ component by giving selector name.
selector: 'my-app' For example, in html <my-app></my-app> tag
}) will include your compoent.
Selector string is kind of ID for component and
case sensitive.

@View annotation provide user interface

@View({ defination for your component. You can
template: '<h1>Hello {{ name }}</h1>' provide inline html as a string in template
}) property or separate html file in templateUrl
property

Components business logic is defined here.

class MyAppComponent {
This is simple typescript class. You can mark
}
any typescript class as component by
 annotating @Component and @View
attributes over that class.

Angular2 heavily use DI (Depedency injection).

bootstrap is responsible for injecting
Components, Services etc into your
bootstrap(MyAppComponent);
application/Component hierarchy.
Inject class/component/services into bootstrap
and later you can resolve them in constructor.

Starting point of angular2 application is

<script>System.import('app');</script>
marked with this script.
For example, System.import(app) will try to
find app.ts file and will load component
MyAppComponent. In html, when browser
try to render <my-app> tag, it will search
MyAppComponent component for selector
my-app and will render template or
templateUrl html definition.

Starts local server on current directory.If you

directly open your website html page without
http-server
starting server, you might get Cross origin
Request Serving error.

live-server static server with live reload feature

Compile the project in the given directory. The

directory needs to contain a tsconfig.json file
tsc -p src -w to direct compilation.

Refer all typescript compiler option.

@Component({ Inject FriendService class into Component and
... child components.
appInjector: [FriendsService] You must import FriendsService first before
}) injecting.

@View({
Include directives into your component. First
...
import all directives you want to use in your
directives: [NgFor, NgIf]
components template/templateUrl.
})

You can make your application respond to user

input by using the event syntax.
The event syntax starts with an event name
surrounded by parenthesis: (event).
(event)
A controller function is then assigned to the
event name: (event)="controllerFn()".

e.g. <input (keyup)="myControllerMethod()">

you can make element references available to

other parts of the template as a local variable
using the #var syntax.
#html-element local reference

e.g. <input #myname (keyup)>

<p>{{myname.value}}</p>

equivalent to ng-repeat in angular 1.x.

Render lists from component in html.
<li *ng-for="#name of names">
{{ name }}
</li>
The way to read this is:
*ng-for
*ng-for : create a DOM element for each item
in an iterable like an array
#name : refer to individual values of the
iterable as 'name'
of names : the iterable to use is called 'names'
in the current controller
 equivalent to ng-If in angular 1.x
It displays element if condition holds true else
*ng-if
given html tag doesnt get rendered in DOM
e.g. <p *ng-if="names.length > 3">

<div class="message" [ng-class]="{error:

errorCount > 0}">
NgClass
Please check errors.
</div>

If NgForm is bound in a component, <form>

NgForm elements in that component will be upgraded
to use the Angular form system.

ng-model binds an existing domain model to a

form control. For a two-way binding, use [(ng-
NgModel
model)] to ensure the model updates in both
directions.

The NgSwitch directive is used to conditionally

swap DOM structure on your template based
on a scope expression. Elements within
NgSwitch
NgSwitch but without NgSwitchWhen or
NgSwitchDefault directives will be preserved at
the location as specified in the template.

An injectable service for executing work inside

NgZone
or outside of the Angular zone.

WARNING: this pipe uses the

Internationalization API. Therefore it is only
DatePipe
reliable in Chrome and Opera browsers.
expression | date[:format]
Formats a date value to a string based on the
requested format.

A service that can be used to get and set the

title of a current HTML document.
Since an Angular 2 application can't be
bootstrapped on the entire HTML document
Title
(<html> tag) it is not possible to bind to the
text property of the HTMLTitleElement
elements (representing the <title> tag).
Instead, this service can be used to set and get
the current title value.
getTitle()
setTitle(newTitle: string)